JS之事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数。现在咱们通过获取鼠标坐标来分析事件对象吧。

直接上代码

<div id="div1">

</div>
</body>
<script>
    var areaDiv=document.getElementById("div1");
    areaDiv.onmousemove=function(event){
        var x=event.clientX;
        var y=event.clientY;
        alert([x,y]);
    }
</script>

结果

chrome及其它浏览器正常弹出，IE8出现错误，在IE8响应函数被触发时，浏览器不会传递事件对象，IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的。

所以代码应该这样写：

var areaDiv=document.getElementById("div1");
    areaDiv.onmousemove=function(event){
        var x=window.event.clientX;
        var y=window.event.clientY;
        alert([x,y]);
    }//事件对象event作为window的属性保存

注意：以上代码火狐浏览器又不支持了，IE和chrome浏览器支持 。

所以最终能兼容浏览器的代码是这样：

var areaDiv=document.getElementById("div1");
    areaDiv.onmousemove=function(event){
        // 法一
         if(!event){
             event=window.event;
         }
        // 法二
        event=event || window.event;
       // 公共代码
        var x=window.event.clientX;
        var y=window.event.clientY;
        alert([x,y]);
    }

注意上面有个问题，那就要从clientX与pageX说开了（下面每个字都要细读,很重要）

clientX和clientY用于获取鼠标在当前的可见窗口的坐标

事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。
浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也就是说需要拖动滚动条才能看到的区域不算。
当你将浏览器窗口缩小时，clientX/clientY的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域。
特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY比火狐下始终大2px。

pageX和pageY可以获取鼠标相对于当前页面的坐标，但是这两个属性在IE8中不支持

鼠标相对于整个页面的X/Y坐标。
注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。
特别说明：IE不支持！

获取滚动距离：

chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取，火狐浏览器认为浏览器的滚动条是html的，可以通过documentElement.scrollTop来获取。

猜你喜欢