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>
