鼠標定位問題總結


鼠標事件發生時的鼠標定位問題即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,滾動條滾動的垂直長度。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM