使用Javascript取网页中鼠标位置

核心提示：在做鼠标移动至一个某些按钮或文字上便在当前位置显示图片的功能时需要用鼠标的坐标来定位,方法比较简单,但面在Firefox的广告做的这么火,甚至用流氓方法,所以需要注意Mozilla或Firefox和IE的兼容.event.clientX 为鼠标距浏览左面边缘的距离, event.clientY 为 鼠村距网页上方边缘的

在做鼠标移动至一个某些按钮或文字上便在当前位置显示图片的功能时需要用鼠标的坐标来定位,方法比较简单,但面在Firefox的广告做的这么火,甚至用流氓方法,所以需要注意Mozilla或Firefox和IE的兼容.
event.clientX 为鼠标距浏览左面边缘的距离, event.clientY 为 鼠村距网页上方边缘的距离,但定位不光这样就行了,需要考虑到当前网页坐标并不是鼠标的位置(例如把网页滚动条拖到最右下方),所以我们需要加上下面的内容:

var x = event.clientX + document.body.scrollLeft;
var y = event.clientY + document.body.scrollTop;

　  如果网页遵循了w3c标准的话需要把 document.body 换成 document.documentElement ,否则 scroll 所取出来的值一律为0.

　  如果大家使用上面的代码并且是在firefox下调试的,是不是已经发现了 "event has not defined",当然我也碰到这问题了:

JS: function test_event() {
　　　 var x = event.clientX + document.body.scrollLeft;
　　　 var y = event.clientY + document.body.scrollTop;
　　　 alert("左边:"+x+ ", 右边:"+y);
}
HTML: <span >click me</span>

　  需要把event对象传进去,按如下方法修改后便能正常运行,只知道IE和Firefox有些dom不一样,但这种方法就有点搞不懂是什么意思:

JS: function test_event(event) {
　　　 var x = event.clientX + document.body.scrollLeft;
　　　 var y = event.clientY + document.body.scrollTop;
　　　 alert("左边:"+x+ ", 右边:"+y);
}
HTML: <span >click me</span>