js获取鼠标位置的坐标及解决兼容性问题

1.event.clientX：获取鼠标的横坐标

2.event.clientY：获取鼠标的纵坐标

document.onclick=function(ev){
  var event=ev ||event
  alert(event.clientX +","+event.clientY)
}

因为火狐浏览器不存在event这个对象，而是存在系统自带的ev，这样ev不存在就取event，ev存在就取ev，这样就解决了浏览器兼容性问题

需要注意的是，event.clientX event.clientY获取的是浏览器可视页面的位置，当浏览器出现滚动条的时候，它们的值需要加上滚动条的距离

　　　　　　　　　 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
                var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft
                var clientX=event.clientX+scrollLeft+'px'
                var clientY=event.clientY+scrollTop+'px'

获取scrollTop值，因为谷歌浏览器不兼容前者，所以用document.body.scrollTop来获取，这样也解决了兼容性问题

下面我给一个demo来更好地去理解为什么要加滚动条的距离，div随着鼠标移动来移动，代码如下

<html>

<head>
<title></title>
</head>
    <style>
        div{
            width:100px;
            height:100px;
            background:red;
            position:absolute;
            left:0px;
            top:0px;
        }
    </style>
    <script>
        window.onload=function(){
        
            document.onmousemove=function(ev){
                var oDiv=document.getElementsByTagName('div')[0]
                var event=ev ||event
                var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
                var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft
                oDiv.style.left=event.clientX+scrollLeft+'px'
                oDiv.style.top=event.clientY+scrollTop+'px'
            }
        }
        
        
    </script>
<body style="height:2000px">
    <div></div>
</body>

</html>

 

posted @ 2018-10-24 17:12  大C文  阅读(879)  评论(0)    收藏  举报