说一下event.x,event.clientX,event.offsetX区别

最新推荐文章于 2021-10-25 21:19:37 发布
最新推荐文章于 2021-10-25 21:19:37 发布
阅读量210 收藏
点赞数
文章标签： 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jamm1986/article/details/83430825
版权
解释一下event.X和event.clientX有什么区别？

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标
event.X也一样
但是如果设置事件对象的定位属性值为relative
event.clientX不变
而event.X返回事件对象的相对于本体的坐标

x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。
offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕。


clientX, clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0；
offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0；
screenX, screenY是相对于用户显示器的位置
x,y是鼠标当前相对于当前浏览器的位置
jamm1986
关注
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 890
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
js window.event对象详尽解析
10-30
4. `clientX` 和 `clientY`: 这两个属性分别返回鼠标在浏览器窗口可视区域（不包括滚动条）内的X和Y坐标，是只读属性，用于获取鼠标位置。 5. `ctrlKey`: 类似于`altKey`，`event.ctrlKey`用于检查`Ctrl`键的状态。...
event.X和event.clientX的区别分析
12-12
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样 但是如果设置事件对象的定位属性值为relative event.clientX不变 而event.X返回事件对象的相对于本体的坐标 event对象详解 ICOOE 2000.3.31 http://www.51js.com/ event代表事件的状态，例如事件发生的的元素、鼠标的位置等等，event对象只在事件过程中才有效。 event属性： altKey 检索ALT键的当前状态 可能的值 true为关闭 false为不关闭 button 检索按下的鼠标键 可能的值： 0 没按键 1 按左键 2
JavaScript event对象clientX，offsetX，screenX异同
weixin_30951231的博客
09-09 190
event对象是JavaScript中最重要的对象之一，他代表了各种事件的状态，在各种事件的事件处理中经常用到，比如键盘活动、鼠标活动等等，其中有几个对象官方说的比较模糊，很难理解，这里有必要通俗化的理解一下。 概念（不是官方，来源于网络）： clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或...
javascript坐标
Ivan Song的专栏
07-28 1698
 clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 screenX 设
event.x,event.clientX,event.offsetX区别
一刀3段
03-27 263
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。 clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。 clientX, clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=...
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
09-05 352
通过 3 张图和 1 张表格，轻松区别JavaScriptEvent 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 一、测试代码如下： <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-...
整理的比较全的event对像在ie与firefox浏览器中的区别
01-19
如onmousemove=doMouseMove(event) 鼠标当前坐标 IE：event.x和event.y。 FF：event.pageX和event.pageY。 通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event....
event.offsetX ,事件
qq_45505241的博客
11-07 2458
事件的offsetX属性
刘利新西安
06-13 738
Sets or retrieves the x-coordinate of the mouse pointer relative to the top-left corner of the offsetParent element of the element that fires the event. Use the srcElement property to get the element
【javascript坐标】——event.x、event.clientX、event.offsetX、event.screenX 用法
严文文 Chris
07-04 1899
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。screenX 设置或获取获取鼠...
JS图解event.offsetX，event.clientX，event.pageX，event.screenX
hys__handsome的博客
10-25 537
event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解
lwx931449660的博客
05-12 1337
offset offsetX、offsetY为当前鼠标点击位置距离当前元素参考原点（左上角）的距离，而不同浏览器参考原点的位置不尽相同，FF及Chrome中参考原点为内容区域左上角，不包含元素边框 offsetX 鼠标当前点击位置距离当前点击元素内容区域最左边（不包含边框）的距离 offsetY 鼠标当前点击位置距离当前点击元素内容区域最上边（不包含边框）的距离 点击不同位置，参考原点不同，则距离不同 以下四个点可供理解offset的相对位置及尺寸 client...
js event.x,event.clientX,event.offsetX区别
xiongzhengxiang的专栏
11-30 1017
blog:xiongzhengxiang interest:inovation and thinking test testeventx = function(e){ alert(e.tagName); alert("e.x is "+ e.x); alert("e.clientX is " +e.clientX);
javascript坐标：event.x、event.clientX、event.offsetX、event.screenX 用法
24K丿丑男的博客
10-11 376
event.x、event.clientX、event.offsetX、event.screenX 用法clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标
JavaScript深入理解window.event事件
<body onmousemove="window.status='X=' + event.clientX + ' Y=' + event.clientY"> ``` 3. **注意事项**： - 不是所有浏览器都支持`window.event`，尤其是非IE浏览器。在现代浏览器中，事件作为参数传递给...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值