成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

屏幕坐標(biāo)、客戶區(qū)域（可視窗口）坐標(biāo)、頁面坐標(biāo)的區(qū)分

HmyBmny / 3195人閱讀

摘要：區(qū)分三類坐標(biāo)屏幕坐標(biāo)可視窗口坐標(biāo)頁面坐標(biāo)有時(shí)不能迅速的對(duì)應(yīng)起來，為了更好的區(qū)分三者，特意畫了一張圖如下屏幕坐標(biāo)顧名思義，即整個(gè)電腦屏幕上任意一點(diǎn)的位置坐標(biāo)，對(duì)應(yīng)的屬性分別為，范圍如上圖最外層紅色邊框范圍，坐標(biāo)為藍(lán)色虛線對(duì)應(yīng)的坐標(biāo)。

區(qū)分三類坐標(biāo)

屏幕坐標(biāo)、可視窗口坐標(biāo)、頁面坐標(biāo)有時(shí)不能迅速的對(duì)應(yīng)起來，為了更好的區(qū)分三者，特意畫了一張圖如下：

屏幕坐標(biāo)

顧名思義，即整個(gè)電腦屏幕上任意一點(diǎn)的位置坐標(biāo)，對(duì)應(yīng)的屬性分別為screenX，screenY,范圍如上圖最外層紅色邊框范圍，坐標(biāo)為藍(lán)色虛線對(duì)應(yīng)的坐標(biāo)?？梢允褂妙愃葡旅娴拇a取得鼠標(biāo)事件的屏幕坐標(biāo):

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
        event = EventUtil.getEvent(event);
        alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});

上述代碼中的EventUtil是一個(gè)事件工具函數(shù)，在文末會(huì)給出

客戶區(qū)域（可視窗口）坐標(biāo)

可以將瀏覽器分為兩大塊，即瀏覽器上部的用戶操作欄（寶藍(lán)色框所對(duì)應(yīng)的區(qū)域）和下部的可視窗口區(qū)域（上圖中棕色框所對(duì)應(yīng)的區(qū)域），該坐標(biāo)系（顏色為粉色）的原點(diǎn)位于可視窗口的右上角，對(duì)應(yīng)的屬性為clientX,clientY
可以使用類似下列代碼取得鼠標(biāo)事件的客戶端坐標(biāo)信息:

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Client coordinates: " + event.clientX + "," + event.clientY);
});
頁面坐標(biāo)

過客戶區(qū)坐標(biāo)能夠知道鼠標(biāo)是在視口中什么位置發(fā)生的，而頁面坐標(biāo)通過事件對(duì)象的 pageX 和 pageY 屬性，能告訴你事件是在頁面中的什么位置發(fā)生的。換句話說，這兩個(gè)屬性表示鼠標(biāo)光標(biāo)在頁面中的位置，因此坐標(biāo)是從頁面本身而非視口的左邊和頂邊計(jì)算的（頁面為藍(lán)色邊框?qū)?yīng)的區(qū)域，坐標(biāo)系為棕色坐標(biāo)系）。
以下代碼可以取得鼠標(biāo)事件在頁面中的坐標(biāo):

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Page coordinates: " + event.pageX + "," + event.pageY);
});
總結(jié)

第一次寫技術(shù)類的文章，文中有不對(duì)的地方，敬請(qǐng)指出。
另附上《JavaScript高級(jí)程序設(shè)計(jì)》一書中總結(jié)的EventUtil事件工具函數(shù)：

var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    //它返回對(duì) event 對(duì)象的引用
    getEvent: function(event){
        return event ? event : window.event;
    },
    //它返回事件的目標(biāo)
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    //用于取消事件的默認(rèn)行為
    preventDefault: function(event){
        if (event.preventDefault){
             event.preventDefault();
         } else {
             event.returnValue = false;
        }
    },

    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        } 
    },
    // 由于 IE 不支持事件捕獲，因此這個(gè)方法在跨瀏覽器的情況下，也只能用來阻止事件冒泡。
    stopPropagation: function(event){
         if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    },
};

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101797.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 評(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 評(píng)論0 收藏0

  • 關(guān)于JS、JQ獲取可視區(qū)域的高度、寬度以及屏幕分辨率的那些事

    摘要：用和獲取相關(guān)屬性網(wǎng)頁可見區(qū)域?qū)捑W(wǎng)頁可見區(qū)域高網(wǎng)頁可見區(qū)域?qū)挵ㄟ吙虻膶捑W(wǎng)頁可見區(qū)域高包括邊框的高網(wǎng)頁正文全文寬網(wǎng)頁正文全文高網(wǎng)頁下滑的距離網(wǎng)頁左滑的距離屏幕分辨率的高屏幕分辨率的寬屏幕可用工作區(qū)的高屏幕可用工作區(qū)的高瀏覽器可視區(qū)域的內(nèi)寬度， 用JS和JQ獲取相關(guān)屬性 JavaScript document.body.clientWidth;//網(wǎng)頁可見區(qū)域?qū)抎ocument.body....

    or0fun 評(píng)論0 收藏0

  • 瀏覽器的各種位置值獲取

    摘要：包括和屬性是可以賦值的，并且會(huì)立即自動(dòng)滾動(dòng)網(wǎng)頁到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁元素的相對(duì)位置。另外，方法也有類似作用，可以使網(wǎng)頁元素出現(xiàn)在瀏覽器窗口的左上角。網(wǎng)頁元素的位置那就是使用方法。就是透過瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。 獲取網(wǎng)頁的大小 一張網(wǎng)頁的全部面積，就是它的大小，通常是由內(nèi)容和css樣式表決定的。瀏覽器窗口的大小，是在瀏覽器中看到的那部分網(wǎng)頁面積。又叫做viewport...

    lvzishen 評(píng)論0 收藏0

  • JavaScript 中那些關(guān)于坐標(biāo)和距離的屬性與方法

    摘要：摘自阮一峰教程位置大小屬性只讀屬性返回瀏覽器窗口左上角相對(duì)于當(dāng)前屏幕左上角的水平距離和垂直距離單位像素。摘自阮一峰教程相關(guān)方法返回一個(gè)對(duì)象，提供當(dāng)前元素的大小位置等信息。摘自阮一峰教程四鼠標(biāo)事件接口通過添加的事件所產(chǎn)生的事件對(duì)象也是實(shí)例。 一 前言 在前端開發(fā)中總會(huì)遇到各種各樣需要使用或計(jì)算坐標(biāo)和距離的情況，但是這些屬性和方法眾多，全部熟練地記下來并非是一件易事，大多只能現(xiàn)查，耗費(fèi)不少...

    jsummer 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<