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