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);
			//显示的数值表示距离事件源的水平，数值方向上的距离
			//事件源就是绑定了事件的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>

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

猜你喜欢