javascript 中 x offsetX clientX screenX pageX的区别
在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, clientY),
其中offsetX, offsetY是指相对于触发事件元素的左上角的偏移。但在不同的浏览器中其值又有所不同。在chrome opera, safari中是指外边缘,即把该元素边框的宽度计算在内,firefox ie则不包含边框值。如下图(一个具有蓝色边框的div)所示。
layerX layerY
layerX layerY是相对于position为absolute或relative的父元素胡外边缘的距离。ie8及ie8之前的版本没有layerX或layerY值。
如下图:最外层是一个绿色边框的div,里面一层是一个红色边框的div, 最里面是一个蓝色边框的div, 在蓝色div上单击,则该事件的layerX与layerY相相对于最外层绿色外边缘的距离(中间红色的div的position设有被设置为absolute或relative, 所有不是相对该元素,反之则是相对于该元素)。
pageX, pageY, x, y, clientX, clientY
pageX, pageY是相对于文档窗口的左上角,x,y和clientX, clientY相同,其值是相对于可视窗口(浏览的可视区域)的左上角。如下图。
此时可视窗口与文档窗口重叠,pageX等于clientX, pageY等于clientY, 如果我们缩小浏览器窗口直到浏览器出现滚动条。此时可视窗口左上角位置不变,但文档窗口左上角位置发生的变化,如下图:
由此我们可以看出当浏览器没有滚动条时(可视窗口与文档窗口重合),pageX与clientX相等,pageX与clientY相等,如果出现下拉滚动条并向下拉动滚动条,文档窗口向上滚动,如果出现左右滑动的滚动条并向右拉动滚动条,文档窗口向左滚动,在文档窗口滚动的情况下,pageX>=clientX, pageY>=clientY, x = clientX, y = clientY,
注意:firefox事件没有x,y属性值, ie8及以下事件没有pageX, pageY属性值并且在ie8及其以下版本event.clientX = event.x + 2, event..clientY = event.y + 2(原理还没弄清) 。
javascript 中 x offsetX clientX screenX pageX的区别相关推荐
- clientX,screenX,pageX,offsetX的区别
前言 关于clientX,screenX,pageX,offsetX的区别之前也比较迷糊,然后自己写了几个demo算是弄明白了,在这记录一下. 定义 一.clientX.clientY 点击位置距离当 ...
- java两字符串是否相等_Java与JavaScript中判断两字符串是否相等的区别
JavaScript是一种常用的脚本语言,这也决定了其相对于其他编程语言显得并不是很规范.在JavaScript中判断两字符串是否相等 直接用==,这与C++里的String类一样.而Java里的等号 ...
- html5有foreach吗,JavaScript中的map()和forEach()有什么区别?
来源:https://medium.com/better-programming,作者:Moon,翻译:公众号<前端全栈开发者> JavaScript中一些最受欢迎的功能可能是map和fo ...
- JavaScript中的name和classname有什么区别
JavaScript 中的 name 和 className 有如下区别: name 属性通常用于表示 HTML 元素的名称,如表单元素中的 input 元素.它可以用于给服务器发送数据. class ...
- Javascript 中 null、NaN和undefined的区别
1.类型分析: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型. 代码 var a1; var a2 = tr ...
- JavaScript中的数组与伪数组的区别
在JavaScript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function). 基本数据类型:String,boolean,Number,Undefined, Null 引用数 ...
- [译]JavaScript中的属性:定义和赋值的区别
原文:http://www.2ality.com/2012/08/property-definition-assignment.html 你知道吗?定义一个属性和为一个属性赋值是有区别的.本文解释了两 ...
- Javascript中undefined和not defined有什么区别?
概念上的解释: undefined是javascript语言中定义的五个原始类中的一个,换句话说,undefined并不是程序报错,而是程序允许的一个值. not defined是javascript ...
- JavaScript中基本数据类型和引用数据类型的区别
1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变 ...
最新文章
- 独立成分分析ICA、因子分析、LDA降维、NMF非负矩阵分解
- Nexus Repository Manager 3 远程命令执行漏洞 CVE-2019-7238
- Eclipse技巧:1.定制toString()模版
- lex编译dos命令_微软新的命令行工具:Windows Terminal
- vmware 扩展Ubuntu虚拟机的磁盘空间
- VS2010创建ATL工程及使用C++测试COM组件
- css样式表中的样式覆盖顺序(转)
- php error_log记录日志的使用方法和配置 (日志目录一定要手动创建)
- while 常见程序逻辑
- 复变函数:傅里叶变换
- 倒计时的js实现 倒计时 js Jquery
- 安装版mysql数据库data在_MySQL 5.7版本的安装使用详细教程+更改数据库data的存储路径...
- APK 包名修改工具
- Hadoop 安装教程
- 基于SpringBoot开源框架的MES生产制造执行系统源码
- uniapp使用阿里字体图标库
- [病毒分析]远程木马创建傀儡进程分析
- ICCV2021 | 医学影像等小数据集的非自然图像领域能否用transformer?
- 关于.NET报表中图表控件线条颜色和粗细设置
- 计算机文档处理是什么,电脑文档被锁了怎么办