[ZZ] JavaScript中event的x,clientX,offsetX的区别

最新推荐文章于 2023-10-23 14:21:50 发布
最新推荐文章于 2023-10-23 14:21:50 发布
阅读量694 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
请看下面的文字说明，也就是event中x,clientX,offsetX,screenX的区别：
  • x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
  • clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。
  • offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
  • screenX:相对于用户屏幕。


文章来源：http://www.ijavascript.cn/jiaocheng/javascript-event-clientx-offsetx-306.html

clide
关注
专栏目录
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 905
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
【javascript坐标】——event.x、event.clientX、event.offsetX、event.screenX 用法
严文文 Chris
07-04 1914
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。screenX 设置或获取获取鼠...
javascript中event.clientX和event.clientY用法的注意事项
weixin_30642029的博客
09-06 311
今天做项目用到了event.clientX和event.clientY,给元素定位，用定位的时候，让top和left等于事件元素的的坐标 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript的动态显示</titl...
javascript坐标
Ivan Song的专栏
07-28 1702
 clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 screenX 设
javascript坐标：event.x、event.clientX、event.offsetX、event.screenX 用法
24K丿丑男的博客
10-11 381
event.x、event.clientX、event.offsetX、event.screenX 用法clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标
js event.x,event.clientX,event.offsetX区别
xiongzhengxiang的专栏
11-30 1018
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);
event.x,event.clientX,event.offsetX区别
01-19
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <...
event.X和event.clientX的区别分析
12-12
但是如果设置事件对象的定位属性值为relative event.clientX不变 而event.X返回事件对象的相对于本体的坐标 event对象详解 ICOOE 2000.3.31 http://www.51js.com/ event代表事件的状态，例如事件发生的的元素、鼠标...
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
event.pageX 和 event.clientX 区别
最新发布
weixin_63681863的博客
10-23 657
都是 JavaScript 中鼠标事件对象的属性，用于获取鼠标事件发生时的水平坐标值。在实际应用中，你可以根据具体的需求选择使用哪个属性来获取鼠标的水平坐标。希望这个解释对你有帮助！如果还有其他问题，请随时提问。需要注意的是，当页面发生滚动时，两者的值会有所不同。是相对于整个文档的坐标，而。是相对于浏览器视口的坐标。没有滚动轴时，就相同。
event.clientX和event.clientY
weixin_33935505的博客
05-05 2726
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 ...
e.offsetX/e.clientX/e.pageX的区别
weixin_30267691的博客
06-30 472
e.offsetX/e.clientX/e.pageX/e.screenX的区别 没有标注的是各浏览器都支持的： e.offsetX：鼠标相对于事件源的X方向的距离( firfox 不支持) e.offsetY：鼠标相对于事件源的Y方向的距离( firfox 不支持) e.clientX：距离浏览器可视区域X方向的距离 e.clientY：距离浏览器可视区域Y方向的距离 e.pageX：鼠标...
div对象属性中 .clientLeft、.offsetLeft、.clientX、.offsetX 之间的差异
@黄小泽的个人博客
05-22 7554
本篇主要介绍clientLeft、offsetLeft、clientX、offsetX这四种元素属性的区别，首先我们要理解清楚它们的概念： clientLeft：该元素对象的左边框宽度。 clientWidth：该元素对象的左内边框至右内边框的距离。 offsetLeft：该元素左外边框至窗口左边界的距离。 offsetWidth：该元素左外边框至右外边框的距离。 我们可以参考下图所示：...
JavaScript1
穿心莲
03-22 160
from:http://www.tsolong.com/post/352.html clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 ...
事件坐标：screenX,clientX,pageX,offsetX的区别
C_Jing_的博客
06-01 769
e.screenX/e.screenY: 事件发生时鼠标相对于电脑屏幕的坐标。e.screenX,e.screenY的最大值不会超过屏幕分辨率。 e.clientX/e.clientY: 事件发生时鼠标在浏览器内容区域的坐标。 ......
event.X和event.clientX区别以及event的其他属性
自由空间
06-13 1910
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样 但是如果设置事件对象的定位属性值为relative event.clientX不变 而event.X返回事件对象的相对于本体的坐标 event对象详解 ICOOE 2000.3.31 http://www.51js.com/ event代表事件的状态，例如事件发生的的元素、鼠标
Js中event对象的x,clientX,offsetX区别
yinyiniao(Leo)'s blog
01-16 9059
 Js中event对象的x,clientX,offsetX三者主要区别含义如下：x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。  clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。  offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。  screenX:相对于用户屏幕。
Web前端从入门到放弃（js鼠标拖拽特效）
Du_Ke_Can的博客
10-12 2335
js鼠标拖拽特效 我们来实现用鼠标点击一个盒子并可以在浏览器窗口下拖拽 原理：利用鼠标点击盒子，然后通过鼠标坐标减去盒子在浏览器的坐标从而得到鼠标在盒子上的disX和disY的值，在利用onmousemove事件，把鼠标移到的位置的坐标的值减去鼠标在盒子上的disX和disY的值赋给盒子的left和right,最后利用onmouseup事件将onmousemove事件给“关了”
关于跨浏览器事件（EVENT）
LENEL的砖篮
07-25 3224
                在Dom Level1中没有定义事件模型，在Dom Level2中定义了事件模型一个较小的子集，在Dom Level3（2004）中事件才被完整定义。        由于IE还没有对于Dom Level1的完整支持，所以当前的浏览器主要存在IE和DOM两种不同的事件模型。这直接导致了事件处理成为JS跨浏览器编程中差异最大的部分。还好除了IE之外，Mozill
利用offset和event.clientX实现拖动与滚动效果的JavaScript技巧
在这个场景中，小盒子`bar`的拖动依赖于`event.clientX`（鼠标按下时的x坐标）和`bar.parentNode.offsetLeft`来计算移动的偏移量。 - `onmousedown` 和 `onmousemove` 事件：当用户按下鼠标并移动时，JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值