获取鼠标位置

关键字: js

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
  };
}
我们要再次讨论IE和其他浏览器之间的差异。Firefox和其他的浏览器使用event.pageX和event.pageY来表示鼠标相对于document文档的位置。如果你有一个500*500的窗口，并且鼠标位于窗口中间，那么pageX和pageY的值将都是250。如果你将窗口向下滚动500象素，pageY的值为750。

    如此相反的是，微软的IE使用event.clientX和event.clientY来表示鼠标相对于window窗口的位置，而不是当前 document文档。在相同的例子中，如果将鼠标放置于500*500窗口的中间，clientX和clientY值将均为250。如果向下滚动页面，clientY将仍为250，因为它是相对于window窗口来测量，而不是当前的document文档。因此，在鼠标位置中，我们应该引入 document文档body区域的scrollLeft和scrollTop属性。最后，IE中document文档实际并不在(0,0)的位置，在它周围有一个小（通常有2px）边框，document.body.clientLeft和document.body.clientTop包含了这个边框的宽度，从而还需要在鼠标位置中引入它们。