屏幕坐标、客户区域（可视窗口）坐标、页面坐标的区分

HmyBmny 发布于2019-08-23 15:17 / 3027人阅读

摘要：区分三类坐标屏幕坐标可视窗口坐标页面坐标有时不能迅速的对应起来，为了更好的区分三者，特意画了一张图如下屏幕坐标顾名思义，即整个电脑屏幕上任意一点的位置坐标，对应的属性分别为，范围如上图最外层红色边框范围，坐标为蓝色虚线对应的坐标。

区分三类坐标

屏幕坐标、可视窗口坐标、页面坐标有时不能迅速的对应起来，为了更好的区分三者，特意画了一张图如下：

屏幕坐标

顾名思义，即整个电脑屏幕上任意一点的位置坐标，对应的属性分别为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;
        }
    },
};

云服务器服务器托管屏幕坐标 hbase的数据坐标苹果坐标系坐标转换 php 横坐标纵坐标

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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