屏幕坐標、客戶區域（可視窗口）坐標、頁面坐標的區分

HmyBmny 發布于2019-08-23 15:17 / 3182人閱讀

摘要：區分三類坐標屏幕坐標可視窗口坐標頁面坐標有時不能迅速的對應起來，為了更好的區分三者，特意畫了一張圖如下屏幕坐標顧名思義，即整個電腦屏幕上任意一點的位置坐標，對應的屬性分別為，范圍如上圖最外層紅色邊框范圍，坐標為藍色虛線對應的坐標。

區分三類坐標

屏幕坐標、可視窗口坐標、頁面坐標有時不能迅速的對應起來，為了更好的區分三者，特意畫了一張圖如下：

屏幕坐標

顧名思義，即整個電腦屏幕上任意一點的位置坐標，對應的屬性分別為screenX，screenY,范圍如上圖最外層紅色邊框范圍，坐標為藍色虛線對應的坐標。可以使用類似下面的代碼取得鼠標事件的屏幕坐標:

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

上述代碼中的EventUtil是一個事件工具函數，在文末會給出

客戶區域（可視窗口）坐標

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

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

頁面坐標

過客戶區坐標能夠知道鼠標是在視口中什么位置發生的，而頁面坐標通過事件對象的 pageX 和 pageY 屬性，能告訴你事件是在頁面中的什么位置發生的。換句話說，這兩個屬性表示鼠標光標在頁面中的位置，因此坐標是從頁面本身而非視口的左邊和頂邊計算的（頁面為藍色邊框對應的區域，坐標系為棕色坐標系）。
以下代碼可以取得鼠標事件在頁面中的坐標:

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

總結

第一次寫技術類的文章，文中有不對的地方，敬請指出。
另附上《JavaScript高級程序設計》一書中總結的EventUtil事件工具函數：

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;
        }
    },
    //它返回對 event 對象的引用
    getEvent: function(event){
        return event ? event : window.event;
    },
    //它返回事件的目標
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    //用于取消事件的默認行為
    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 不支持事件捕獲，因此這個方法在跨瀏覽器的情況下，也只能用來阻止事件冒泡。
    stopPropagation: function(event){
         if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    },
};

GPU云服務器云服務器屏幕坐標 hbase的數據坐標蘋果坐標系坐標轉換 php 橫坐標縱坐標

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101797.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、JQ獲取可視區域的高度、寬度以及屏幕分辨率的那些事

摘要：用和獲取相關屬性網頁可見區域寬網頁可見區域高網頁可見區域寬包括邊框的寬網頁可見區域高包括邊框的高網頁正文全文寬網頁正文全文高網頁下滑的距離網頁左滑的距離屏幕分辨率的高屏幕分辨率的寬屏幕可用工作區的高屏幕可用工作區的高瀏覽器可視區域的內寬度，用JS和JQ獲取相關屬性 JavaScript document.body.clientWidth;//網頁可見區域寬document.body....

or0fun 2019-08-21 11:35 評論0 收藏0
瀏覽器的各種位置值獲取

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

lvzishen 2019-08-21 11:53 評論0 收藏0
JavaScript 中那些關于坐標和距離的屬性與方法

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

jsummer 2019-08-26 13:57 評論0 收藏0