js获取鼠标位置

来源：互联网发布：js页面加载完毕执行编辑：程序博客网时间：2024/05/01 12:13

在IE浏览器中，有个window.event对象。有三个关于坐标的属性。

offsetX、offsetY 相对与当前层的位置

screenX、screenY 相对与屏幕的位置

clientX、clientY 相对与浏览器的位置

除了谷歌全部支持以上的三个属性，火狐只支持后两个属性，第一个属性可以用layer代替。

不过可以通过判断来选这使用不同属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta charset="utf-8"/><style type="text/css">*{margin:0;paddig:0;}#dv{/*如果使用margin来布局，IE10和chrome仍能得到正确的坐标，但是火狐会把margin的值也加进来*/background-color:black;font-size:40px;width:400px;height:300px;font-family:微软雅黑;color:white;text-align:center;position:absolute;top:50px;left:50px;}#dv span{line-height:150px;}</style><script type="text/javascript">onload=function(){var dv=document.getElementById("dv");dv.onmousemove=function(){var e=window.event||arguments[0];// IE和chrome支持window.event对象，e就是window.event对象。而火狐不支持该对象，不过火狐会传入一个参数，该参数类似window.event对象。需要用arguments参数列表对象来取得该对象。var tag=window.event?"offset":"layer";// 获取能正确显示鼠标在当前层的坐标的属性var x=e[tag+"X"];// 拼接属性，得到坐标。var y=e[tag+"Y"];var location=x+"."+y;this.innerHTML="<span>Do you Love me !<br/>"+location+"<span>";};};</script></head><body><div id="dv"><span>Do you Love me !<span></div></body></html>