歡迎訪問我的博客https://qqqww.com/,祝碼農同胞們早日走上人生巔峰,迎娶白富美~~~
聲明:參考文檔你是如何理解var e=e||window.event的
剛才寫博客《javascript實現簡單拖曳功能》的時候,用到了
e.clientX
這一類坐標屬性,就想到把這一類相似的屬性都整理一下,他們分別為
e.clientX , e.clientY
e.pageX , e.pageY
e.offsetX , e.offsetY
e.screenX , e.screenY
e 是什么
這里先說一下
e
是什么
e
是給一個事件對象,可以在編寫函數的時候,傳入一個形參e
,然后執行函數的時候傳入一個實參,那么e
這個時候就是這個作為實參的對象
var event = e || event
兼容性寫法,這樣寫可能不太好理解,但是假如給他寫成
var event = event || window.event
,或者寫成var event = e ? event : window.event
想必就更好理解了
下面借用道友的一張圖來說明一下針對于不同瀏覽器的兼容性問題
很顯然,在
Firefox
瀏覽器中僅支持event
,而且Forefox
支持對象參數的傳入,但是IE6/7/8
是不支持對象參數的傳入的,所以此種方法保證對所有瀏覽器的兼容
e.clientX , e.clientY
鼠標相對于瀏覽器窗口可視區域的X,Y坐標,可視區域不包括工具欄和滾動條,IE事件和標準事件支持
e.screenX , e.screenY
上面講了e.clientX , e.clientY,再講e.screenX , e.screenY感覺再合適不過了,因為是鼠標相對于屏幕的坐標,包括瀏覽器上面的工具欄和滾動條,二者差別就在這,IE事件和標準事件支持
e.pageX , e.pageY
相對于文檔的定位,文檔的左上角為(0,0),向右為正,向下為正,IE不支持
e.offsetX , e.offsetY
和e.pageX , e.pageY一模一樣的功能,但是這兩個屬性只有IE支持
相關的一些寫法
在文檔中的位置Y坐標等于在可視區域的Y坐標加上滾動條垂直方向卷去的距> 離:
e.pageY = e.pageY || e.clientY +(window).scrollTop():瀏覽器滾動條滾動的垂直距離