【面試篇】event對(duì)象中offsetX,clientX,pageX,screenX,layerX,

darryrzhong 發(fā)布于2019-08-29 12:16 / 3112人閱讀

摘要：指鼠標(biāo)指針相對(duì)于觸發(fā)事件元素的左上角的偏移，在，中指外邊緣，即將該元素邊框的寬度計(jì)算在內(nèi)，則不包含邊框值，如下圖所示和是相對(duì)文檔窗口左上角的距離，不會(huì)隨滾動(dòng)條移動(dòng)和是相對(duì)于瀏覽器可視窗口左上角的距離，參照點(diǎn)會(huì)隨滾動(dòng)條滾動(dòng)而移動(dòng)當(dāng)可視窗口和文

offsetX,offsetY:指鼠標(biāo)指針相對(duì)于觸發(fā)事件元素的左上角的偏移，在Chrome，Opera,Safari中指外邊緣，即將該元素邊框的寬度計(jì)算在內(nèi)，firefox則不包含邊框值，如下圖所示：

pageX和pageY是相對(duì)文檔窗口左上角的距離，不會(huì)隨滾動(dòng)條移動(dòng)

clientX和clientY是相對(duì)于瀏覽器可視窗口左上角的距離，參照點(diǎn)會(huì)隨滾動(dòng)條滾動(dòng)而移動(dòng)

當(dāng)可視窗口和文檔窗口重疊時(shí)，pageX和clientX相等

當(dāng)縮小可視窗口致使瀏覽器出現(xiàn)滾動(dòng)條時(shí)，clientX

screenX和screenY:鼠標(biāo)位置相對(duì)于用戶屏幕左上角的距離

layerX和layerY:FF特有，當(dāng)觸發(fā)元素沒有設(shè)置絕對(duì)定位或相對(duì)定位，則以頁(yè)面為參考點(diǎn)，如果設(shè)置了，則以觸發(fā)盒子的左上角為參考點(diǎn)（包含border）

X和Y:IE特有，由于IE坐標(biāo)選擇十分混亂，故盡量不要使用

云服務(wù)器 GPU云服務(wù)器火狐獲取event對(duì)象 jsp中event layerX clientX

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111786.html

相關(guān)文章

鼠標(biāo)點(diǎn)擊的各種坐標(biāo) (事件對(duì)象)

摘要：返回事件發(fā)生時(shí)，鼠標(biāo)指針相對(duì)于瀏覽器窗口可視區(qū)域的水平垂直窗口坐標(biāo)?？梢晠^(qū)域不包括工具欄和滾動(dòng)條，事件和標(biāo)準(zhǔn)事件都定義了這個(gè)屬性返回鼠標(biāo)指針的位置，類似于，但它們使用的是文檔坐標(biāo)而非窗口坐標(biāo)。是相對(duì)于被點(diǎn)擊了的元素。 e.clientX,e.clientY返回事件發(fā)生時(shí)，鼠標(biāo)指針相對(duì)于瀏覽器窗口可視區(qū)域的水平（垂直）窗口坐標(biāo)?？梢晠^(qū)域不包括工具欄和滾動(dòng)條，IE事件和標(biāo)準(zhǔn)事件都定義了這2...

xushaojieaaa 2019-08-23 14:51 評(píng)論0 收藏0
鼠標(biāo)點(diǎn)擊的各種坐標(biāo) (事件對(duì)象)

摘要：返回事件發(fā)生時(shí)，鼠標(biāo)指針相對(duì)于瀏覽器窗口可視區(qū)域的水平垂直窗口坐標(biāo)?？梢晠^(qū)域不包括工具欄和滾動(dòng)條，事件和標(biāo)準(zhǔn)事件都定義了這個(gè)屬性返回鼠標(biāo)指針的位置，類似于，但它們使用的是文檔坐標(biāo)而非窗口坐標(biāo)。是相對(duì)于被點(diǎn)擊了的元素。 e.clientX,e.clientY返回事件發(fā)生時(shí)，鼠標(biāo)指針相對(duì)于瀏覽器窗口可視區(qū)域的水平（垂直）窗口坐標(biāo)?？梢晠^(qū)域不包括工具欄和滾動(dòng)條，IE事件和標(biāo)準(zhǔn)事件都定義了這2...

xiongzenghui 2019-08-02 14:09 評(píng)論0 收藏0
JS基礎(chǔ)篇--了解JS的clientX、pageX、screenX等方法來獲取鼠標(biāo)坐標(biāo)詳解

摘要：相對(duì)瀏覽器窗口簡(jiǎn)單代碼即可實(shí)現(xiàn)，然而這是還不夠，因?yàn)榻^大多數(shù)情況下我們希望獲取鼠標(biāo)點(diǎn)擊位置相對(duì)于瀏覽器窗口的坐標(biāo)，的，屬性分別表示鼠標(biāo)點(diǎn)擊位置相對(duì)于文檔的左邊距，上邊距。在一些DOM操作中我們經(jīng)常會(huì)跟元素的位置打交道，鼠標(biāo)交互式一個(gè)經(jīng)常用到的方面，令人失望的是不同的瀏覽器下會(huì)有不同的結(jié)果甚至是有的瀏覽器下沒結(jié)果，這篇文章就上鼠標(biāo)點(diǎn)擊位置坐標(biāo)獲取做一些簡(jiǎn)單的總結(jié)，沒特殊聲明代碼在IE8...

phodal 2019-08-21 10:23 評(píng)論0 收藏0
關(guān)于offsetX、layerX、clientX、screenX以及pageX（Y同理）

摘要：關(guān)于以及我們都熟知，標(biāo)題中的幾個(gè)方法都是用來獲取事件的位置，但是他們有什么區(qū)別呢就用一張圖來說明指事件發(fā)生位置相對(duì)觸發(fā)元素左上角的水平坐標(biāo)特有鼠標(biāo)相比較于當(dāng)前坐標(biāo)系的位置即從當(dāng)前容器依次往上尋找設(shè)置絕對(duì)定位或相對(duì)定位的元素為參考坐標(biāo)系，以該關(guān)于offsetX、layerX、clientX、screenX以及pageX 我們都熟知，標(biāo)題中的幾個(gè)方法都是用來獲取事件(event)的位置，...

Rindia 2019-08-26 13:41 評(píng)論0 收藏0
重探瀏覽器事件(淺析事件編程化)

前言在平常開發(fā)過程中,就算不使用現(xiàn)在主流的框架也至少得使用個(gè)Jquery,這些工具幫我們統(tǒng)一不同瀏覽器平臺(tái)之間的差異和細(xì)節(jié),可以將注意力集中到開發(fā)上來. 不過有意思的一點(diǎn)是,在看完高程的N年后我居然連event對(duì)象中的target和currentTarget屬性的區(qū)別都忘記了. 先提幾個(gè)引子: 你能說出event.currentTarget和event.target的區(qū)別嗎? 如果可以那么ev...

lk20150415 2019-08-02 16:09 評(píng)論0 收藏0