Javascript裡常見的事件位置屬性

2021-08-17 17:07:04 字數 2145 閱讀 5512

e.pagex——相對整個頁面的座標

注意:ie6、ie7、ie8無該屬性

e.layerx——相對當前座標系的border左上角開始的座標

注意:在opera、ie6、ie7、ie8中這個屬性,而ie8以上表示相對當前座標系的border左上角開始的座標 + 滾動條滾過的距離

e.offsetx——相對當前座標系的border左上角開始的座標

注意:火狐中無該屬性

e.clientx——相對可視區域的座標

e.x——相對可視區域的座標

注意:火狐中無該屬性

pagex指滑鼠在頁面上的位置,以頁面左側為參考點

clientx指可視區域內離左側的距離,以滾動條滾動到的位置為參考點。各個瀏覽器相同。

即當有滾動條時clientx 小於 pagex

//ie6、7、8不識別pagex

pagey=clienty+scrolltop-clienttop;(只討論y軸,x軸同理,下同)

頁面上的位置=可視區域位置+頁面滾動條切去高度-自身border高度

滑鼠在螢幕中的位置,指的是滑鼠到電腦螢幕左側的距離。 各個瀏覽器相同。

與clientx的區別是clientx是到瀏覽器的距離。

例如:當網頁縮小,拖動到螢幕中間時,screnx 大於 clientx

為了相容瀏覽器,layerx是ff、chrome識別,offsetx是除了ff之外。

如果觸發元素設定了position,則offsetx等於layerx

如果頁面有滾動條,新增滾動的距離。

layerx:ff特有,是相對于父元素的位置,滑鼠相對於「觸發事件的元素的層級關係中離該元素最近的,設定了positio的父元素」的邊 界的位置,從border的左上角開始定位,即如果這個父元素存在border,則座標原點在border的左上角,而不是內容區域的左上角。

offsetx:ie特有,滑鼠相對於「觸發事件的元素」的位置,從內容區域左上角開始定位,不是從border左上角開始!這個屬性比較好用,用來判斷滑鼠點在乙個元素中的哪個位置很方便,ff沒有直接替換的屬性。

到可視區域的距離,ff不識別,有無滾動條相同,同clientx。

opera,chrome和safari的event.x返回值和event.clientx相同。

ie8、9、10的event.x返回值和event.clientx相同。

ie7的e.x比e.clientx少2px。

注意:以上僅以x為例,有x的屬性就有對應的y屬性,例如:e.pagex和e.pagey,他們是成對存在的。

scrollheight: 獲取物件的滾動的高度。

scrollwidth:獲取物件的滾動的寬度

scrollleft:設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離,即被捲起的寬度

scrolltop:設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離,即被捲起的高度

offsetheight:獲取物件相對於版面或由父座標 offsetparent 屬性指定的父座標的高度(包括border),即物件本身高+border上下寬度

offsetwidth:獲取物件相對於版面或由父座標 offsetparent 屬性指定的父座標的寬度(包括border),即物件本身寬度+border左右寬度

offsetleft:獲取物件相對於版面或由 offsetparent 屬性指定的父座標的計算左側位置,即相對于父元素的左位移

offsettop:獲取物件相對於版面或由 offsettop 屬性指定的父座標的計算頂端位置,即相對于父元素的上位移

event.clientx: 相對文件的水平座標,即相對於可視區域的水平座標

event.clienty: 相對文件的垂直座標,即相對於可視區域的垂直座標

event.offsetx: 相對容器的水平座標,即相對于父元素的水平座標

event.offsety: 相對容器的垂直座標,即相對于父元素的垂直座標

clientwidth:物件相對於網頁可見區域的寬度

clientheight:物件相對於網頁可見區域的高度

JavaScript常見相容

1.滾動條到頂端的距離 滾動高度 var scrolltop document.documentelement.scrolltop document.body.scrolltop 2.滾動條到左端的距離 var scrollleft document.documentelement.scrollle...

JavaScript中常見的HTML DOM操作

dom是文件物件模型 document object model 的縮寫,dom 定義了訪問 html 和 xml 文件的標準 w3c 文件物件模型 dom 是中立於平台和語言的介面,它允許程式和指令碼動態地訪問和更新文件的內容 結構和樣式。以下是一段html的 鏈結 同時,dom解析html文件在...

JavaScript中,關於new的那些事

這篇文章是自己對new學習過程中的一些理解,有不對的地方希望指出,接受組織的批評教育。導火線,前段時間學習jquery的時候,看到原始碼中有這樣一段 jquery function selector,context 短時間內,對於我這種初學者來說,感覺資訊量有點大。第一,jquery.fn是什麼東西...