滑鼠定位問題總結

Chrome擴充套件開發極客發表於2015-09-06

滑鼠事件發生時的滑鼠定位問題即Mouse Position,由於標準的滯後及各個瀏覽器廠商的實現不同,目前沒有完美的解決方案。

該問題首先受到不同瀏覽器的事件模型有不同的實現方式的影響:

IE瀏覽器中,有一個顯式的window.event物件,可以隨時取用。
W3C相容瀏覽器中,使用隱式物件,以第一個引數event的形式傳遞給事件處理函式。

其次,不同瀏覽器中Event物件的位置相關屬性也有差別:


screenX 相對於電腦螢幕的左上角,滑鼠的X座標。標準屬性,都支援。
screenY 相對於電腦螢幕的左上角,滑鼠的Y座標。標準屬性,都支援。

clientX 相對於當前視窗可視區域(不包括視窗邊框)的左上角,滑鼠的X座標。標準屬性,都支援。
clientY 相對於當前視窗可視區域(不包括視窗邊框)的左上角,滑鼠的Y座標。標準屬性,都支援。

x 相對於css中有position屬性的最近的父元素,滑鼠偏移的x軸座標。標準草案屬性,等價於clientX,IE支援
如果沒有這樣的父元素,預設以BODY元素(等價於pageX)。
y 相對於css中有position屬性的最近的父元素,滑鼠偏移的y軸座標。標準草案屬性,等價於clientY,IE支援
如果沒有這樣的父元素,預設以BODY元素(等價於pageY)。

pageX 相對於BODY元素的左上角,滑鼠的X座標。標準草案屬性,只有非IE,IE9以後版本支援。
e.pageX = window.pageXOffset + e.clientX
pageY 相對於BODY元素的左上角,滑鼠的Y座標。標準草案屬性,只有非IE,IE9以後版本支援。
e.pageY = window.pageYOffset + e.clientY

offsetX 相對於css中有position屬性的最近的父元素,滑鼠偏移的x軸座標。標準草案屬性,非IE支援。
offsetY 相對於css中有position屬性的最近的父元素,滑鼠偏移的Y軸座標。標準草案屬性,非IE支援。
offsetX 相對於發出事件的元素,滑鼠偏移的x軸座標。標準草案屬性,只有IE支援。
offsetY 相對於發出事件的元素,滑鼠偏移的Y軸座標。標準草案屬性,只有IE支援。

layerX 相對於css中有position屬性的最近的父元素,滑鼠偏移的x軸座標。非標準屬性,等價於offsetX,只有非IE支援。
layerY 相對於css中有position屬性的最近的父元素,滑鼠偏移的y軸座標。非標準屬性,等價於offsetY,只有非IE支援。

scrollX,滾動條滾動的水平長度。
scrollY,滾動條滾動的垂直長度。

相關文章