【面試篇】event對象中offsetX,clientX,pageX,screenX,layerX,

darryrzhong 發布于2019-08-29 12:16 / 3105人閱讀

摘要：指鼠標指針相對于觸發事件元素的左上角的偏移，在，中指外邊緣，即將該元素邊框的寬度計算在內，則不包含邊框值，如下圖所示和是相對文檔窗口左上角的距離，不會隨滾動條移動和是相對于瀏覽器可視窗口左上角的距離，參照點會隨滾動條滾動而移動當可視窗口和文

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

pageX和pageY是相對文檔窗口左上角的距離，不會隨滾動條移動

clientX和clientY是相對于瀏覽器可視窗口左上角的距離，參照點會隨滾動條滾動而移動

當可視窗口和文檔窗口重疊時，pageX和clientX相等

當縮小可視窗口致使瀏覽器出現滾動條時，clientX

screenX和screenY:鼠標位置相對于用戶屏幕左上角的距離

layerX和layerY:FF特有，當觸發元素沒有設置絕對定位或相對定位，則以頁面為參考點，如果設置了，則以觸發盒子的左上角為參考點（包含border）

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

云服務器 GPU云服務器火狐獲取event對象 jsp中event layerX clientX

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111786.html

鼠標點擊的各種坐標 (事件對象)

摘要：返回事件發生時，鼠標指針相對于瀏覽器窗口可視區域的水平垂直窗口坐標?？梢晠^域不包括工具欄和滾動條，事件和標準事件都定義了這個屬性返回鼠標指針的位置，類似于，但它們使用的是文檔坐標而非窗口坐標。是相對于被點擊了的元素。 e.clientX,e.clientY返回事件發生時，鼠標指針相對于瀏覽器窗口可視區域的水平（垂直）窗口坐標?？梢晠^域不包括工具欄和滾動條，IE事件和標準事件都定義了這2...

xushaojieaaa 2019-08-23 14:51 評論0 收藏0
鼠標點擊的各種坐標 (事件對象)

摘要：返回事件發生時，鼠標指針相對于瀏覽器窗口可視區域的水平垂直窗口坐標?？梢晠^域不包括工具欄和滾動條，事件和標準事件都定義了這個屬性返回鼠標指針的位置，類似于，但它們使用的是文檔坐標而非窗口坐標。是相對于被點擊了的元素。 e.clientX,e.clientY返回事件發生時，鼠標指針相對于瀏覽器窗口可視區域的水平（垂直）窗口坐標。可視區域不包括工具欄和滾動條，IE事件和標準事件都定義了這2...

xiongzenghui 2019-08-02 14:09 評論0 收藏0
JS基礎篇--了解JS的clientX、pageX、screenX等方法來獲取鼠標坐標詳解

摘要：相對瀏覽器窗口簡單代碼即可實現，然而這是還不夠，因為絕大多數情況下我們希望獲取鼠標點擊位置相對于瀏覽器窗口的坐標，的，屬性分別表示鼠標點擊位置相對于文檔的左邊距，上邊距。在一些DOM操作中我們經常會跟元素的位置打交道，鼠標交互式一個經常用到的方面，令人失望的是不同的瀏覽器下會有不同的結果甚至是有的瀏覽器下沒結果，這篇文章就上鼠標點擊位置坐標獲取做一些簡單的總結，沒特殊聲明代碼在IE8...

phodal 2019-08-21 10:23 評論0 收藏0
關于offsetX、layerX、clientX、screenX以及pageX（Y同理）

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

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

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

lk20150415 2019-08-02 16:09 評論0 收藏0