//显示的数值表示距离可视区的水平,数值方向上的距离
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>