原文:http://www.webreference.com/programming/javascript/mk/column2/index.html
参考这一节:
Capturing Mouse Movement
以下是意译:
document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
上面这段代码的作用是当鼠标在web页面上移动的时候,获取鼠标的x,y坐标,并保存到mousePos变量中。
这段代码很精巧,而且跨浏览器。有趣的地方是通过逻辑或运算符的规则做到这点。
比如在IE中不支持ev参数传给mouseMove,只支持window.event,其他浏览器相反。
ev || window.event 会先检查ev,如果不为false(null会被转换成false,非null被视为true),则ev = ev被执行。 这是非IE的浏览器。
否则,会使用ev=window.event,这就是IE浏览器了。
不管怎么样,ev总是能获得有效值。
ev.pageX || ev.pageY 也是同理,非IE浏览器支持这两个属性。因此返回一个JSON对象。
否则就要使用IE支持的clientX和clientY。但是这里又考虑到滚动条存在的情况下,IE有点闹心,做了特殊处理。
因为当你拉动滚动条的时候,IE不会改变clientX和clientY的值,因为它们是当前可视窗口的相对位置,所以要补上文档滚动条的scrollLeft和scrollTop部分。但是还要减去边框的宽度和高度。因为他们影响到可视窗口的实际原点位置。
原文写的有问题,因为这里代码是减法,文章中却说:
There is a small (usually 2px) border surrounding it. document.body.clientLeft and clientTop countain the width of this border, so we add those also to our mouse position.
究竟哪个正确,要等我已后用IE测试才知道。手边刚好没有。
补充:
另外其实还有一个简单的做法,window.event.x和window.event.y 就是鼠标的当前坐标。