e.clientX e.clientY,e.pageX e.pageY,e.offsetX e.offsetY的三种含义以及小demo，补充知识.children, .onmousemove

最新推荐文章于 2024-07-11 18:00:32 发布

源@

最新推荐文章于 2024-07-11 18:00:32 发布

阅读量357

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48727085/article/details/108222109

版权

			//显示的数值表示距离可视区的水平，数值方向上的距离
			console.log(evt.clientX);
			console.log(evt.clientY);
			//显示的数值表示距离页面的水平，数值方向上的距离
			//这里解释一下页面和可视区
			//当页面很大时，页面通过滚动条滚动展示，展示的区域称为可视区
			console.log(evt.pageX);
			console.log(evt.pageY);
			//显示的数值表示距离事件源的水平，数值方向上的距离
			//事件源就是绑定了事件的dom元素
			console.log(evt.offsetX);
			console.log(evt.offsetY);

	//补充知识 var span = div.children[0];中的.children[0]的含义：div元素中的第一个孩子
	//dom元素
	//.onmousemove 条件是鼠标移动发生

<!DOCTYPE HTML>
<html lang = 'en'>
	<head>
		<meta charset = 'UTF-8'/>
		<title>Document1</title>
		<style>
			div{
				position:relative;
				width:500px;
				height:500px;
				border:1px solid red;
			}
			span{
				position:absolute;
				bottom:0;
				left:0;
			}
		</style>
	</head>
	<body>
		<div>
			<span></span>
		</div>
		<script>
			var div = document.getElementsByTagName('div')[0];
			var span = div.children[0];
			div.onmousemove = function(e){
				var evt = e || event
				var x = evt.clientX;
				var y = evt.clientY;
				span.innerHTML = x + ', ' + y + 'px';
			}
			div.onmouseout = function(){
				span.innerHTML = null;
			}
		</script>
	</body>
</html>

源@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
e.clientX e.clientY,e.pageX e.pageY,e.offsetX e.offsetY的三种含义以及小demo，补充知识.children, .onmousemove

//显示的数值表示距离可视区的水平，数值方向上的距离 console.log(evt.clientX); console.log(evt.clientY); //显示的数值表示距离页面的水平，数值方向上的距离 //这里解释一下页面和可视区 //当页面很大时，页面通过滚动条滚动展示，展示的区域称为可视区 console.log(evt.pageX); console.log(evt.pageY); //显示的数值表示距离事件源的水平，数值方向上的距离 ...
复制链接

扫一扫