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。
原文地址:https://blog.csdn.net/yang_chuanlong/article/details/49232945
javascript 中 x offsetX clientX screenX pageX的区别的更多相关文章
- javascript中apply、call和bind的区别,容量理解,值得转!
a) javascript中apply.call和bind的区别:http://www.cnblogs.com/cosiray/p/4512969.html b) 深入浅出 妙用Javascrip ...
- javascript中三目运算符和if else有什么区别
javascript中三目运算符和if else有什么区别今天写了一个图片轮播的小demo,用到了判断先试了一下if else,代码如下:if(n >= count-1){n =0;}else{ ...
- JavaScript中var和this定义变量的区别
JavaScript中var和this定义变量的区别 在js中声明变量时可以使用var和this,但使用this的有很大一部分参考书是没有的,经过查阅相关资料总结如下: 用var和this声明变量,存 ...
- javascript中back(-1)和go(-1)的区别
javascript中back(-1)和go(-1)的区别 一.总结 一句话总结: 数据 history.back(-1):直接返回当前页的上一页,数据全部消息,是个新页面 history.go(-1 ...
- JavaScript中基本数据类型和引用数据类型的区别(栈——堆)
JavaScript中基本数据类型和引用数据类型的区别 1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据 ...
- clientX,screenX,pageX,offsetX的异同 【转载】
首先说明一下以上对象都是指javascript中的,不包含其他语言. pageX/pageY: 鼠标相对于整个页面的X/Y坐标.注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000 ...
- javascript 中加’var‘和不加'var'的区别,你真的懂吗?
没看之前千万别说我是标题党,这个问题真的有好多淫都不懂!!! 大家都看了很多文章,都说避免隐式声明全局变量,就是说声明变量前必须加'var',那加了'var'和不加'var'到底有啥区别呢? 先来看一 ...
- Javascript 中 null、NaN和undefined的区别
1.类型分析: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型. 代码 var a1; var a2 = tr ...
- Java与JavaScript中判断两字符串是否相等的区别
JavaScript是一种常用的脚本语言,这也决定了其相对于其他编程语言显得并不是很规范.在JavaScript中判断两字符串是否相等 直接用==,这与C++里的String类一样.而Java里的等号 ...
随机推荐
- 负载均衡集群中的session解决方案【转】
通常面临的问题 从用户端来解释,就是当一个用户第一次访问被负载均衡代理到后端服务器A并登录后,服务器A上保留了用户的登录信息:当用户再次发送请求时, 根据负载均衡策略可能被代理到后端不同的服务器,例如 ...
- 题解-TIOJ1905 最理想的身高差
Problem 题目原型 题目大意:求区间最小差值 序列长度\(1e5\),询问\(2e5\) Solution 总体思路就是找出所有可能作为答案的点对,用资料结构_(:зゝ∠)_维护,然后询问 至于 ...
- MYSQL 查看最大连接数和修改最大连接数
MySQL查看最大连接数和修改最大连接数 1.查看最大连接数show variables like '%max_connections%';2.修改最大连接数set GLOBAL max_connec ...
- python 基础 three day
本节主要内容: 一. python基本数据类型有哪些? 1. int ==> 整数.主要用来进行数学计算. 2. str ==> 字符串,可以保存少量数据并进行相应的操作 3. boo ...
- wireshark找(检测)不到(捕获)网卡的解决办法
1 前言 有时候打开wireshark,会提示找不到可用网卡,此时是因为NetGroup Packet Filter Driver 服务没有开启. 环境:笔记本 系统:Win10 网络:WIFI 2 ...
- [JavaScript]iframe的contentWindow
HTMLIFrameElement.contentWindow返回的是HTMLIFrameElement类型元素的window对象 通过此对象可以修改iframe实体内的window行为 <if ...
- Python-视图 触发器 事务 存储过程
1.视图2.触发器*** 在某个时间发生了某个事件时 会自动触发一段sql语句3.事务*****4.存储过程***** 5.函数6.备份与恢复*** mysqldump -u -p (库名 [表名] ...
- AES对数据进行加密与解密
AES对数据进行加密与解密随着对称密码的发展,DES数据加密标准算法由于密钥长度较小(56位),已经不适应当今分布式开放网络对数据加密安全性的要求,因此1997年NIST公开征集新的数据加密标准,即A ...
- JsRender 前端渲染模板基础学习
JsRender前端渲染模板 使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中:避免了在JS中通过“+”等手动分割.连接字符串的复杂过程:针对 ...
- boolalpha的作用
#include <iostream>using namespace std;int main(){ bool b=true; cout << &q ...