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

xushaojieaaa 發布于2019-08-23 14:51 / 2122人閱讀

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

e.clientX,e.clientY
返回事件發生時，鼠標指針相對于瀏覽器窗口可視區域的水平（垂直）窗口坐標。可視區域不包括工具欄和滾動條，IE事件和標準事件都定義了這2個屬性

e.pageX e.pageY
返回鼠標指針的位置，類似于event.clientX、event.clientY，但它們使用的是文檔坐標而非窗口坐標。這2個屬性不是標準屬性，但得到了廣泛支持。IE事件中沒有這2個屬性

e.offsetX e.offsetY
返回鼠標指針的位置，相對于事件源元素的水平（垂直坐標），只有IE有這兩個屬性，標準事件沒有對應的屬性

e.screenX e.screenY
返回事件發生時，鼠標指針相對于用戶顯示器屏幕的左上角水平（垂直）坐標

e.layerXe.layerY

一.鼠標點擊

        window.onload = function(e){
            var box = document.getElementById("box");
            box.onclick = function(e){
                console.log("e.clientX,e.clientY: " + e.clientX,e.clientY);
                console.log("e.offsetX,e.offsetY: " + e.offsetX,e.offsetY);
                console.log("e.pageX,e.pageY: " + e.pageX,e.pageY);
                console.log("e.screenX,e.screenY: " + e.screenX,e.screenY);
                console.log("e.layerX,e.layerY: " + e.layerX,e.layerY);
            }
        }

二、不同瀏覽器對這些屬性的支持：

三、圖解 event.offsetX，event.clientX，event.pageX，event.screenX屬性

四、圖解 event.layerX，event.layerY 屬性

五、圖解 event.layerX，event.layerY 屬性

六:詳細文字描述

chrome：

e.pageX——相對整個頁面的坐標 
e.layerX——相對當前坐標系的border左上角開始的坐標
e.offsetX——相對當前坐標系的border左上角開始的坐標 
e.clientX——相對可視區域的坐標 e.x——相對可視區域的坐標

ff：(firefox)

e.pageX——相對整個頁面的坐標
e.layerX——相對當前坐標系的border左上角開始的坐標
e.offsetX——無
e.clientX——相對可視區域的坐標
e.x——無

opera：

e.pageX——相對整個頁面的坐標
e.layerX——無
e.offsetX——相對當前坐標系的內容區域左上角開始的坐標
e.clientX——相對可視區域的坐標
e.x——相對可視區域的坐標

safari：（這個和chrome是一樣的）

e.pageX——相對整個頁面的坐標
e.layerX——相對當前坐標系的border左上角開始的坐標
e.offsetX——相對當前坐標系的border左上角開始的坐標
e.clientX——相對可視區域的坐標
e.x——相對可視區域的坐標

IE9：

e.pageX——相對整個頁面的坐標
e.layerX——相對當前坐標系的border左上角開始的坐標 + 滾動條滾過的距離（這個NB轟轟了····=。=）
e.offsetX——相對當前坐標系的內容區域左上角開始的坐標
e.clientX——相對可視區域的坐標
e.x——相對當前坐標系的border左上角開始

IE8：

e.pageX——無
e.layerX——無
e.offsetX——相對當前坐標系的內容區域左上角開始的坐標
e.clientX——相對可視區域的坐標
e.x——相對當前坐標系的border左上角開始

IE7：

IE6：

所以考慮到兼容的時候必須這么寫，

        function getEventPosition(ev){   
           var x, y;   
           if (ev.layerX || ev.layerX == 0) {   
               x = ev.layerX;   
               y = ev.layerY;   
           }else if (ev.offsetX || ev.offsetX == 0) { // Opera   
               x = ev.offsetX;   
               y = ev.offsetY;   
           }   
           return {x: x, y: y};   
        }

PageX和clientX
pageX指鼠標在頁面上的位置，以頁面左側為參考點
clientX指可視區域內離左側的距離，以滾動條滾動到的位置為參考點。各個瀏覽器相同。
即當有滾動條時clientX 小于 pageX

screenX
鼠標在屏幕中的位置，指的是鼠標到電腦屏幕左側的距離。各個瀏覽器相同。
與clientX的區別是clientX是到瀏覽器的距離。
例如：當網頁縮小，拖動到屏幕中間時，screnX 大于 clientX

offsetX和layerX
為了兼容瀏覽器，layerX是FF、chrome識別，offsetX是除了FF之外。

如果觸發元素設置了position，則offsetX等于layerX
如果頁面有滾動條，添加滾動的距離。

layerX:FF特有，是相對于父元素的位置，鼠標相對于“觸發事件的元素的層級關系中離該元素最近的，設置了position的父元素”的邊界的位置，從border的左上角開始定位，即如果這個父

元素存在border，則坐標原點在border的左上角，而不是內容區域的左上角。
offsetX:IE特有，鼠標相對于“觸發事件的元素”的位置，從內容區域左上角開始定位，不是從border左上角開始！這個屬性比較好用，用來判斷鼠標點在一個元素中的哪個位置很方便，FF沒有直接替換的屬性。

點擊li，如果UL設置了position則layerX相對于UL，如果沒有則向父級冒泡尋找設置了position的元素，直到根節點body。
offsetX是相對于被點擊了的LI元素。

e.x
FF不識別
到可視區域的距離，有無滾動條相同，同clientX
opera，chrome和safari的event.x返回值和event.clientX相同
IE8910event.x返回值和event.clientX相同
ie7e.x比e.clientX少2px

云服務器 GPU云服務器鼠標點擊坐標鼠標點擊事件 html對象點擊事件 html的鼠標事件

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

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

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

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

xiongzenghui 2019-08-02 14:09 評論0 收藏0
JavaScript中的各種寬高以及位置總結

摘要：和這一對屬性是用來讀取元素的的寬度和高度的。第二部分對象在中，對于元素的運動的操作通常都會涉及到對象，而對象也存在很多位置屬性，且由于瀏覽器兼容性問題會導致這些屬性間相互混淆，這里一一講解。文章轉自中的各種寬高以及位置總結在javascript中操作dom節點讓其運動的時候，常常會涉及到各種寬高以及位置坐標等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運動原理，同時...

microelec 2019-08-21 10:26 評論0 收藏0
HTML元素和事件對象中的各種寬高和位置

摘要：元素和事件對象中的各種寬高和位置標簽經常被一堆的弄混，統一整理一下。元素中的寬高和位置屬性表示元素的內部寬度，以像素計。表示元素實際占用的高度，包括其邊框，內邊距和元素內容。 HTML元素和事件對象中的各種寬高和位置標簽： js [TOC] 經常被一堆的xxxWidth,xxxLeft弄混，統一整理一下。 1. HTML元素中的寬高和位置屬性 clientWidth 表示元素的內...

gggggggbong 2019-08-22 10:40 評論0 收藏0
JS進階篇4---原生JS實現對元素的拖拽

摘要：原生實現對元素的拖拽一背景介紹此處為鋪墊內容，可跳過隨著前端的不斷發展，各種各樣的前端規范和新知識新技術層出不窮，極大地拓展了開發者的操作空間，也大大地提升了用戶體驗。原生 JS 實現對 html 元素的拖拽一、背景介紹【此處為鋪墊內容，可跳過】隨著 Web 前端的不斷發展，各種各樣的前端規范和新知識、新技術層出不窮，極大地拓展了開發者的操作空間，也大大地提升了用戶體驗。而隨著...

evin2016 2019-08-02 15:24 評論0 收藏0
JS進階篇4---原生JS實現對元素的拖拽

摘要：原生實現對元素的拖拽一背景介紹此處為鋪墊內容，可跳過隨著前端的不斷發展，各種各樣的前端規范和新知識新技術層出不窮，極大地拓展了開發者的操作空間，也大大地提升了用戶體驗。原生 JS 實現對 html 元素的拖拽一、背景介紹【此處為鋪墊內容，可跳過】隨著 Web 前端的不斷發展，各種各樣的前端規范和新知識、新技術層出不窮，極大地拓展了開發者的操作空間，也大大地提升了用戶體驗。而隨著...

phoenixsky 2019-08-23 18:22 評論0 收藏0