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

xiongzenghui 發(fā)布于2019-08-02 14:09 / 2474人閱讀

摘要：返回事件發(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個(gè)屬性

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

e.offsetX e.offsetY
返回鼠標(biāo)指針的位置，相對(duì)于事件源元素的水平（垂直坐標(biāo)），只有IE有這兩個(gè)屬性，標(biāo)準(zhǔn)事件沒(méi)有對(duì)應(yīng)的屬性

e.screenX e.screenY
返回事件發(fā)生時(shí)，鼠標(biāo)指針相對(duì)于用戶顯示器屏幕的左上角水平（垂直）坐標(biāo)

e.layerXe.layerY

一.鼠標(biāo)點(diǎn)擊

        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);
            }
        }

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

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

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

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

六:詳細(xì)文字描述

chrome：

e.pageX——相對(duì)整個(gè)頁(yè)面的坐標(biāo) 
e.layerX——相對(duì)當(dāng)前坐標(biāo)系的border左上角開(kāi)始的坐標(biāo)
e.offsetX——相對(duì)當(dāng)前坐標(biāo)系的border左上角開(kāi)始的坐標(biāo) 
e.clientX——相對(duì)可視區(qū)域的坐標(biāo) e.x——相對(duì)可視區(qū)域的坐標(biāo)

ff：(firefox)

e.pageX——相對(duì)整個(gè)頁(yè)面的坐標(biāo)
e.layerX——相對(duì)當(dāng)前坐標(biāo)系的border左上角開(kāi)始的坐標(biāo)
e.offsetX——無(wú)
e.clientX——相對(duì)可視區(qū)域的坐標(biāo)
e.x——無(wú)

opera：

e.pageX——相對(duì)整個(gè)頁(yè)面的坐標(biāo)
e.layerX——無(wú)
e.offsetX——相對(duì)當(dāng)前坐標(biāo)系的內(nèi)容區(qū)域左上角開(kāi)始的坐標(biāo)
e.clientX——相對(duì)可視區(qū)域的坐標(biāo)
e.x——相對(duì)可視區(qū)域的坐標(biāo)

safari：（這個(gè)和chrome是一樣的）

e.pageX——相對(duì)整個(gè)頁(yè)面的坐標(biāo)
e.layerX——相對(duì)當(dāng)前坐標(biāo)系的border左上角開(kāi)始的坐標(biāo)
e.offsetX——相對(duì)當(dāng)前坐標(biāo)系的border左上角開(kāi)始的坐標(biāo)
e.clientX——相對(duì)可視區(qū)域的坐標(biāo)
e.x——相對(duì)可視區(qū)域的坐標(biāo)

IE9：

e.pageX——相對(duì)整個(gè)頁(yè)面的坐標(biāo)
e.layerX——相對(duì)當(dāng)前坐標(biāo)系的border左上角開(kāi)始的坐標(biāo) + 滾動(dòng)條滾過(guò)的距離（這個(gè)NB轟轟了····=。=）
e.offsetX——相對(duì)當(dāng)前坐標(biāo)系的內(nèi)容區(qū)域左上角開(kāi)始的坐標(biāo)
e.clientX——相對(duì)可視區(qū)域的坐標(biāo)
e.x——相對(duì)當(dāng)前坐標(biāo)系的border左上角開(kāi)始

IE8：

e.pageX——無(wú)
e.layerX——無(wú)
e.offsetX——相對(duì)當(dāng)前坐標(biāo)系的內(nèi)容區(qū)域左上角開(kāi)始的坐標(biāo)
e.clientX——相對(duì)可視區(qū)域的坐標(biāo)
e.x——相對(duì)當(dāng)前坐標(biāo)系的border左上角開(kāi)始

IE7：

IE6：

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

        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指鼠標(biāo)在頁(yè)面上的位置，以頁(yè)面左側(cè)為參考點(diǎn)
clientX指可視區(qū)域內(nèi)離左側(cè)的距離，以滾動(dòng)條滾動(dòng)到的位置為參考點(diǎn)。各個(gè)瀏覽器相同。
即當(dāng)有滾動(dòng)條時(shí)clientX 小于 pageX

screenX
鼠標(biāo)在屏幕中的位置，指的是鼠標(biāo)到電腦屏幕左側(cè)的距離。各個(gè)瀏覽器相同。
與clientX的區(qū)別是clientX是到瀏覽器的距離。
例如：當(dāng)網(wǎng)頁(yè)縮小，拖動(dòng)到屏幕中間時(shí)，screnX 大于 clientX

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

如果觸發(fā)元素設(shè)置了position，則offsetX等于layerX
如果頁(yè)面有滾動(dòng)條，添加滾動(dòng)的距離。

layerX:FF特有，是相對(duì)于父元素的位置，鼠標(biāo)相對(duì)于“觸發(fā)事件的元素的層級(jí)關(guān)系中離該元素最近的，設(shè)置了position的父元素”的邊界的位置，從border的左上角開(kāi)始定位，即如果這個(gè)父

元素存在border，則坐標(biāo)原點(diǎn)在border的左上角，而不是內(nèi)容區(qū)域的左上角。
offsetX:IE特有，鼠標(biāo)相對(duì)于“觸發(fā)事件的元素”的位置，從內(nèi)容區(qū)域左上角開(kāi)始定位，不是從border左上角開(kāi)始！這個(gè)屬性比較好用，用來(lái)判斷鼠標(biāo)點(diǎn)在一個(gè)元素中的哪個(gè)位置很方便，F(xiàn)F沒(méi)有直接替換的屬性。

點(diǎn)擊li，如果UL設(shè)置了position則layerX相對(duì)于UL，如果沒(méi)有則向父級(jí)冒泡尋找設(shè)置了position的元素，直到根節(jié)點(diǎn)body。
offsetX是相對(duì)于被點(diǎn)擊了的LI元素。

e.x
FF不識(shí)別
到可視區(qū)域的距離，有無(wú)滾動(dòng)條相同，同clientX
opera，chrome和safari的event.x返回值和event.clientX相同
IE8910event.x返回值和event.clientX相同
ie7e.x比e.clientX少2px

云服務(wù)器 GPU云服務(wù)器鼠標(biāo)點(diǎn)擊坐標(biāo) 鼠標(biāo)點(diǎn)擊事件 html對(duì)象點(diǎn)擊事件 html的鼠標(biāo)事件

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xiongzenghui

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow1.5安裝

閱讀 3811·2023-04-25 23:32
原生 js 實(shí)現(xiàn)移動(dòng)端 Touch 滑動(dòng)反彈

閱讀 2118·2019-08-30 15:55
sass簡(jiǎn)單總結(jié)（1）

閱讀 2726·2019-08-30 15:52
重學(xué)前端學(xué)習(xí)筆記（十七）--Promise里的代碼為什么比setTimeout先執(zhí)行？

閱讀 3185·2019-08-30 10:54
CSS--使用CSS Grid（網(wǎng)格）布局

閱讀 926·2019-08-29 16:16
三欄布局-中欄流動(dòng)布局的方式

閱讀 735·2019-08-29 15:09
最好用的koa2+mysql的RESTful API腳手架，mvc架構(gòu)，支持node調(diào)試，pm2部署

閱讀 3740·2019-08-26 14:05
JavaScript 設(shè)計(jì)模式(六) 迭代器模式

閱讀 1712·2019-08-26 13:22

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章