获取鼠标移动信息
Capturing Mouse Movement
获取鼠标移动信息
To start we need to capture the mouse coordinates. This is done by adding a function to document.onmousemove:
第一步：获取鼠标的坐标——加一个用户函数到document。onmousemove，代码：
| <script>
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 }; }
</script> |
We must first explain the event object. Whenever you move the mouse, click, press a key, etc., an event is fired.
in Internet Explorer this event is global; it's stored in window.event. In Firefox, and other browsers, this event is
passed to whatever function is attached to the action. Since we attached the mouseMove function to document.
onmousemove, mouseMove gets passed the event object.
首先要说明的是evnet对象。不管你move、click、press鼠标等，都会触发一个event对象的事件。在不同的浏览器中，触发的event对象的情况不同。在IE中该触发的event是全局的，该event被存储在window。event里。 在firefox或者其他浏览器中，event事件会被相应的action获取。当我们将mouseMove函数赋值于document。onmousemove，mouseMove会获取鼠标移动事件。To make ev contain the event object in every browser we OR it with window.event. In Firefox the " || window.event"
will be ignored since ev already contains the event. In IE ev is null so it will get set to window.event.
上面的JavaScript语句“ev = ev || window。event ”让ev在所有浏览器都能获取到鼠标移动的event事件。在Firefox下"||window。event"将不起作用，因为ev已经有了赋值。在IE中ev是null，ev将设置为window。event。
Since we'll need to obtain the mouse coordinates many times over this article we make a mouseCoords function
that takes one argument: the event.
由于在这篇文章中需要多次获取鼠标坐标，所以设计了mouseCoords这个获取鼠标坐标的函数，它只包含了一个参数：event。
Again we run into differences between IE and other browsers. Firefox and other browsers use event.pageX and
event.pageY to represent the mouse position relative to the document. If you have a 500x500 window and your
mouse is in the middle, pageX and pageY will both be 250. If you then scroll down 500 pixels pageY will now
by 750.
为了使程序能运行在IE与Firefox及其他浏览器下。Firefox即其它浏览器以event.pageX和event.pageY来引用相对于文档document的鼠标位置。如果你有一个500*500的窗口window，而且你的鼠标位置在正中间，那么paegX和pageY都将是250，如果将页面往下滚动500px，那么pageY将是750px。（同理向右滚动）
Contrary to this, IE decided to use event.clientX and event.clientY to represent the mouse position relative to the
window, not the document. In our same example clientX and clientY will both be 250 if you put your mouse at
the middle of a 500x500 window. If you scroll down on the page, clientY will remain 250 since it is measured
relative to the window and not where you are on the document. As a result we need to add the scrollLeft and
scrollTop properties of the document body to our mouse position. Finally, the document in IE isn't actually at
the 0,0 position. 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与Firefox等不同，IE以event.clientX和event.clientY来代表相对于窗口windowd鼠标位置，并不是上面的相对于文档document。当我们有一个500*500的窗口，鼠标在正中间，那么clientX与clientY也是250，如果你垂直滚动窗口到任何位置，clientY仍然是250，因为相对ie窗口并没有变化。想得到正确的结果，我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性。最后，由于IE并没有0,0的文档起始位置，因为通常会设置2px左右的边框border在周围，边框的宽度包含在document.body.clientLeft与clientTop这两个属性中，我们再加入这些到鼠标的位置中。
<!--EndFragment-->