博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
屏幕坐标、客户区域(可视窗口)坐标、页面坐标的区分
阅读量:6221 次
发布时间:2019-06-21

本文共 2488 字,大约阅读时间需要 8 分钟。

区分三类坐标

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

图1-1

屏幕坐标

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

转载地址:http://dgrja.baihongyu.com/

你可能感兴趣的文章
第一次面试他人有感
查看>>
XML Parser 概述
查看>>
硬盘还原软件Comodo Time Machine
查看>>
并行计算在基于遥感影像中的应用
查看>>
uniq过滤工具
查看>>
Android中的AutoCompleteTextView的使用
查看>>
SYN Flood DOS Attack with C Source Code
查看>>
命令查看mysql数据库的大小
查看>>
重载(overload)、覆盖(override)、隐藏(hide)的区别
查看>>
iOS的主要框架介绍
查看>>
Unknown error (0×80005000) (type COMException) TFS 2010
查看>>
C#动态生成html页面
查看>>
HDU 1358
查看>>
面向对象分析与设计(第3版)
查看>>
超棒的jQuery响应式图片处理插件:jQuery picture
查看>>
基于jQuery UI Autocomplete的AngularJS 指令(directive)扩展
查看>>
jsp包含文件的两种方法
查看>>
android 安装应用到SD卡上
查看>>
VIM快捷键大全(转)
查看>>
数据挖掘学习02 - 使用weka的kmeans聚类分析
查看>>