捕捉鼠标的移动

原文：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 就是鼠标的当前坐标。