e.clientX,e.clientY, e.pageX , e.pageY , e.offsetX , e.offsetY , e.screenX , e.screenY

歡迎訪問我的博客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()(window).scrollTop():瀏覽器滾動條滾動的垂直距離

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現的。 ??事件,就是文檔或瀏覽器窗口中發生的一些特...
    霜天曉閱讀 3,526評論 1 11
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,046評論 0 2
  • JavaScript 與 HTML 之間的交互是通過事件實現的。事件,就是文檔或瀏覽器窗口中發生的一些特定的交互瞬...
    LemonnYan閱讀 697評論 0 4
  • 本節介紹各種常見的瀏覽器事件。 鼠標事件 鼠標事件指與鼠標相關的事件,主要有以下一些。 click 事件,dblc...
    許先生__閱讀 2,494評論 0 4
  • 本來想和上一篇一起寫,又擔心太長,導致自己復習時,看不下去,于是就另寫一篇筆記。 ClientX與ClientY返...
    Miss____Du閱讀 8,282評論 3 6