一、文档中的鼠标移动事件------onmousemove
<script>
document.onmousemove=function(){
console.log(arguments.length);
console.log(arguments[0]);
//有一个参数e,是一个对象,是事件参数对象
}
</script>
二、clientX和clientY获取横纵坐标----案例图片随着鼠标移动
<img src="1.png" alt="" id="im" style="position: absolute;left: 0;top: 0;">
<script>
document.onmousemove=function(e){
//谷歌和火狐中有这个对象e
//IE8中没有这个是对象e,而是用window.event
e=window.event||e;
document.getElementById("im").style.left=e.clientX+"px";
document.getElementById("im").style.top=e.clientY+"px";
}
</script>
三、pageX和pageY获取横纵坐标-----案例图片随着鼠标移动
<img src="1.png" alt="" id="im" style="position: absolute;left: 0;top: 0;">
<script>
document.onmousemove=function(e){
//如果有滚动条的时候,拉动滚动条,会出现bug
//解决办法是用pageX和pageY代替
//但是这两个属性火狐和谷歌可以用,IE9中不支持
e=window.event||e;
document.getElementById("im").style.left=e.pageX+"px";
document.getElementById("im").style.top=e.pageY+"px";
}
</script>
四、兼容性写法(封装对象)
<!-- 封装关于获取横纵坐标的兼容性代码,并且把代码放在一个对象中 -->
<script>
var evt={
//window.event和事件参数e的兼容
getEvent:function(evt){
return window.event||evt;
},
//可视区域的横坐标的兼容代码
getClientX:function(evt){
return this.getEvent(evt).clientX;
},
//可视区域的纵坐标的兼容代码
getClientY:function(evt){
return this.getEvent(evt).clientY;
},
//页面向左卷曲出去的横坐标
getScrollLeft:function(){
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//页面向上卷曲出去的横坐标
getScrollTop:function(){
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//相对于页面(屏幕)的横坐标(pageX或者是clientX+scrollLeft)
getPageX:function(evt){
return this.getEvent(evt).pageX?this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
},
//相对于页面(屏幕)的纵坐标(pageY或者是clientY+scrollTop)
getPageY:function(evt){
return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
}
}
</script>