clientX、pageX、screenX、offsetX、layerX的区别

最新推荐文章于 2021-02-22 15:32:11 发布
最新推荐文章于 2021-02-22 15:32:11 发布
阅读量969 收藏 1
点赞数
分类专栏： JavaScript 文章标签： screenX pageX clientX offsetX layerX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chen_start02/article/details/80193827
版权
        screenX，screenY：鼠标相对于用户 显示器屏幕左上角的坐标；

pageX，pageY：鼠标相对于 文档左上角的坐标， pageY=clientY+scrollY

clientX，clientY：鼠标相对于当前 浏览器窗口左上角的坐标， pageY=clientY+scrollY

offsetX，offsetY：鼠标相对于 触发事件的元素位置 内容区左上角的坐标；

layerX，layerY：如果触发元素没有设置定位，则以页面左上角为参考点；如果触发元素有设置定位，则以触发元素border边框左上角为参考点；




图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
JavaScript中获取鼠标位置相关属性总结
10-25
在现代浏览器中，推荐使用clientX和clientY来获取鼠标在视窗内的位置，使用pageX和pageY来获取鼠标在整个文档中的位置，而对于IE9及更新的浏览器，layerX和layerY是替代offsetX和offsetY的不错选择。在设计跨浏览器...
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
js clientX pageX offsetX screenX
哈哈绝的博客
10-28 1223
js clientX pageX offsetX screenX pageX pageY:鼠标指针的位置，相对于文档开头左上角的位置 offsetX offsetY:鼠标相对于事件源元素左上角的x,y坐标 clientX clientY：鼠标指针相对与窗口左上角的位置 screenX screenY 鼠标指针相对于显示器左上角的位置 ...
screenX,clientX,pageX,offsetX,pageXoffset的区别
weixin_30575309的博客
11-10 115
event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性 event.clientX、event.clientY 鼠标相对于浏览器可视区域的X,Y坐标（将参照点改成了浏览器内容区域的左上角），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类...
offsetX、clientX、screenX、pageX、layerX
weixin_30865427的博客
08-14 183
pageX/Y 原点相对于文档窗口左上角。 offsetX/Y 原点相对于触发事件元素的左上角，需要注意的是，offset是有负值的，如果你的元素有边框，那么offset会是负值。 （黑色为鼠标点击点） （测试了IE11、Opera54.0.2952.71、Chrome68.0.3423.2、Firefox61.0.2中offset均不含边框的宽度） clientX/Y 原点...
offsetX pageX clientX screenX
fakerac的博客
09-24 465
offsetX pageX clientX screenX在浏览器下面的具体功能
javascript 事件对象 坐标事件说明
10-29
例如，`event.offsetX/Y`、`event.layerX/Y`、`event.x/y` 和 `event.pageX/pageY` 在某些情况下可能提供相同的信息，但它们在不同浏览器中的行为并不一致。在编写兼容性良好的 JavaScript 代码时，开发者通常需要...
pageX、clientX、screenX、offsetX、layerX、x
asd65285的专栏
10-16 475
chrome： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标
JavaScript中鼠标event的位置(clientX,layerX,x,offsetX等)
星.云计算
03-20 258
JavaScript中的event对象一共有六对鼠标位置的属性。分别如下： 属性对 参考点 浏览器兼容性 clientX，clientY 浏览器窗口 所有 layerX，layerY 最近的绝对定位的父节点，如果没有，则为document Firefox，Chrome，Safari offsetX，offsetY 事件目标对象 所有，Firefox...
screenX(Y),clientX(Y)和pageX(Y),offsetX(Y)和layerX(Y)
weixin_34232363的博客
01-15 77
2019独角兽企业重金招聘Python工程师标准>>> ...
pageX、clientX、screenX、offsetX、layerX、x区别 && click && stroke/fill
夏己也是学习好青年
03-09 415
转载自：http://blog.sina.com.cn/s/blog_780a94270101kdgo.html chrome： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可
clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解
weixin_30666753的博客
07-11 143
　　clientX,offsetX,layerX,pageX,screenX,X有时容易记混，通过测试当前的主流浏览器疏理了自己的一些看法以供参考。 Chrome下（测试版本为51.0.2704.106）： 　　由上图可见题目中的6种属性可分为三大类： 　　1.鼠标指针相对于屏幕的坐标：screenX/Y 　　2.相对于页面且不考虑滚动条是否滚动：clientX/Y,X...
clientX、pageX、offsetX、screenX的区别
zhaomin_g的博客
10-25 774
clientX、clientY: 相对于浏览器窗口可视区域的X,Y坐标。 pageX、pageY: 类似于clientX、clientY,相对于浏览器窗口可视区域的X,Y坐标加上滚动条滚动的长度，说白了就是文档坐标。 套用公式就是： pageX = clientX + document.documentElement.scrollLeft- document.documentElemen...
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 4131
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
clientX、screenX、pageX、offsetX、layerX
web_hua的博客
10-15 367
e.pageX——参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 e.layerX——鼠标位置相对当前坐标系的border左上角开始的坐标 e.offsetX——鼠标位置相对当前坐标系的border左上角开始的坐标 e.clientX——鼠标位置相对可视区域的坐标 e.screenX——鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原
Javascript中event对象的clientX，LayerX，offsetX, pageX
漫游学海之旅
02-11 2767
废话不多说，下面分别检测各个浏览器下的e.pageX e.layerX e.offsetX e.clientX e.screenX e.x 属性；测试浏览器：FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9测试代码：View Code 图示：测试结果如下：chrome：e.pageX——相对整个页面的坐标 e.layerX——相对当前选
clientX,pageX,offsetX,screenX的区别
ykizz的博客
07-08 329
（1）event.clientX、event.clientY     鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 （2）event.pageX、event.pageY     类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。...
js中event对象的offsetX、 clientX、pageX、screenX、 layerX、x之间的区别
fengzhen8023
08-06 1287
我们在web前端项目中经常会使用到offsetX、 clientX、pageX、screenX、 layerX、x等变量，但是有的时候有搞不清楚他们之间的区别，甚至被搞得一头雾水。 这里给大家总结了一下他们之间的区别，而且使用图片给大家清晰的展示出来。 **图片是从其他大神那里字节拿过来用的，这是大神的原博客 [江波的博客](http://www.cnblogs.com/jiang...
offsetx,clientx,pagex
最新发布
03-17
offsetX，clientX 和 pageX 都是 JavaScript 中用于获取鼠标相对于文档的坐标的属性。 offsetX：是鼠标相对于当前元素的左边界的水平距离。 clientX：是鼠标相对于浏览器窗口的左边界的水平距离。 pageX：是鼠标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值