鼠标事件中的位置关系

基础理论-W3C-javascript

x, y
clientX, clientY
pageX. pageY
offsetX, offsetY
screenX, screenY
movementX, movementY
layerX, layerY







































属性 说明 兼容性
x y clientX和clientY的别名，没有其他实际意义上的区别 不是标准规范，不建议使用
clientX clientY 以视窗可见范围的左上角为参考系，与页面滚动无关，不包括滚动条和空间 IE的原点是(2, 2)，不是(0, 0)
pageX pageY
以整个文档为参考系，包括因为滚动而不可见的部分，即事件发生时鼠标在整个文档中的位置


MDN中的解释是：
the coordinate of the event relative to the whole document.
IE9以上支持


兼容方法为：


pageX = e.clientY + scrollTop - e.clientTop
offsetX offsetY 事件发生时，鼠标距离目标元素的左上角原点的位置


MDN中的解释是：
the offset in the coordinate of the mouse pointer between that event and the padding edge of the target node		 IE6支持
screenX screenY 事件发生时鼠标在整个屏幕上的位置
movementX movementY 当前鼠标事件与上一次movemove事件，鼠标的位移


MDN中的解释是：
currentEvent.movementX = currentEvent.screenX - previousEvent.screenX

  • layerX和layerY
    目前只在FF中获得支持，我也没做过多的研究

  • 倒是关于offsetX和offsetY，之前在做drag and drop的组件的时候，有遇到一些小的问题
    有的人说offsetX和offsetY是发生事件的地点在事件父元素的坐标系统中的 x 坐标和 y 坐标，但是这个说法不是很准确。
    按照这种解释，如果我们给从上到下排列的三个div各绑定一个点击事件，在每个div的中心点击一次，获得的offsetX和offsetY应该是有所差异的。
    offsetX应该都一样，但是offsetY会逐渐变大。
    可实际情况是三个事件的offsetY都一样。因此，我的理解是offsetX和offsetY代表了鼠标事件发生时，鼠标在目标元素的坐标系统的中的位置，与父元素无关。（这个坐标系统以目标元素的padding为origin）

    有时间了会补充一个测试的结果贴上来