鼠标事件中event对象的clientx和pagex的区别与联系_宿雪家的小镇_新浪博客

最新推荐文章于 2024-06-21 01:45:00 发布
最新推荐文章于 2024-06-21 01:45:00 发布
阅读量180 收藏
点赞数
文章标签： js html css java python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28202661/article/details/109653158
版权

     event.clientX、event.clientY

　　鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

　　event.pageX、event.pageY

　　类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

　　event.offsetX、event.offsetY

　　鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

　　event.screenX、event.screenY

　　鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

鼠标事件中event对象的clientx和pagex的区别与联系

你猜不到喔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
event.X和event.clientX的区别分析
12-12
但是如果设置事件对象的定位属性值为relative event.clientX不变 而event.X返回事件对象的相对于本体的坐标 event对象详解 ICOOE 2000.3.31 http://www.51js.com/ event代表事件的状态，例如事件发生的的元素、鼠标...
[js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect
qq_14993591的博客
09-06 383
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。
event.pageX 和 event.clientX 区别
weixin_63681863的博客
10-23 449
都是 JavaScript 中鼠标事件对象的属性，用于获取鼠标事件发生时的水平坐标值。在实际应用中，你可以根据具体的需求选择使用哪个属性来获取鼠标的水平坐标。希望这个解释对你有帮助！如果还有其他问题，请随时提问。需要注意的是，当页面发生滚动时，两者的值会有所不同。是相对于整个文档的坐标，而。是相对于浏览器视口的坐标。没有滚动轴时，就相同。
一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
ruoyiqing的专栏
09-13 1892
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕，于是决定做个图来区分一下
区分event对象中的[clientX,offsetX,screenX,pageX]
嘿嘿
07-06 926
前言 在平时的开发中，非常讨厌的就是兼容性了，兼容性的问题总会让我们记忆混淆，所以这次来区分一下event对象中的常用获取鼠标位置。 clientX clientY event.clientX event.clientY client直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 client范围 兼容性：IE和主流游览器都支持。 offse
鼠标事件中event对象的clientx和pagex的区别与联系
suxue1994的博客
03-01 1295
     event.clientX、event.clientY 　　鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 　　event.pageX、event.pageY 　　类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性...
jQuery学习笔记4——event.pageX()方法/event.pageY()方法
weixin_30301449的博客
07-10 348
该方法的作用是获取到光标相对于页面的X坐标和Y坐标。网页中常用的title提示效果就和这两个属性有关。 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http:...
关于视图的属性的分类总结
AMAZING
06-02 1335
视口 元素视图属性 元素方法 Window视图属性 Document文档视图 （event.screenX、event.screenY） （event.clientX、event.clientY） （event.pageX、event.pageY） （event.offsetX、event.offsetY）
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
热门推荐
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
12-03
用javascript获取鼠标位置： 代码如下: function mousePosition(ev) { if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft – document.body....
JS的Event事件对象使用方法
10-28
此外，对于鼠标事件（如 `click`、`mousemove`），事件对象还有额外的属性，如 `clientX` 和 `clientY` 表示鼠标相对于浏览器窗口的坐标，`screenX` 和 `screenY` 表示相对于屏幕的坐标，以及 `button` 表示哪个鼠标...
js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别
javaloveiphone的专栏
03-22 9589
pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,同一个元素坐标不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,即是以浏览器滑动条此刻的滑动到的位置为参考点,同一个元素坐标随滑动条移动而变化.注： 1、如果元素位于body中，e.clientX + document.body.scrollLeft - document.body.clientLeft = e.p
event.clientX和event.clientY
weixin_33935505的博客
05-05 2693
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 ...
与event相关的几个属性和方法
weixin_34198762的博客
01-07 114
1、jq获取鼠标的位置——事件对象属性之：event.pageX,event.page 如果不适用JQuery, I E中是event.x和event.y,而Firefox中是event.pageX,event.pageY. JQuery进行了很好的统一：event.pageX,event.pageY.。（与f f一样） 作用：获取鼠标相对于页面的x和y距离。并且使用jq不用考虑是否有...
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 851
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
鼠标事件以及clientX、offsetX、screenX、pageX、x的区别
weixin_55560445的博客
02-21 224
鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ console.l...
JavaScript 事件Event的兼容写法。event属性(pageX,clientX)
houyanhua1的专栏
03-16 1388
event.html： //点击页面的任何部分 document.onclick = function (event) { //兼容写法 event = event || window.event; //兼容写法 console.log(e
HTML(17)——圆角和盒子阴影
最新发布
m0_74386799的博客
06-21 540
作用：设置元素的外边框为圆角属性名：border-radius属性值：数字+px/百分比也可以每个角设置不同的效果，从左上角顺时针开始赋值，没有取值的角与对角取值相同。
event.originalEvent.touches和event.pageX不存在怎么获得
07-15
如果 `event.originalEvent.touches` 和 `event.pageX` 属性都不存在，那么可能是因为你的事件对象 `event` 不是鼠标事件或触摸事件。在这种情况下，你可以尝试使用其他属性或方法来获取页面上的X坐标。 首先，你可以尝试使用 `event.clientX` 和 `event.clientY` 属性来获取鼠标事件的页面坐标。这两个属性表示鼠标相对于浏览器窗口可视区域的坐标，而不是相对于整个页面的坐标。 ```javascript $("#flipbook").on("mousedown", function(event) { var startX = event.clientX; // 鼠标事件的X坐标 console.log("startX:", startX); }); ``` 如果你处理的是触摸事件，可以尝试使用 `event.originalEvent.changedTouches[0].clientX` 和 `event.originalEvent.changedTouches[0].clientY` 属性来获取触摸事件的页面坐标。和鼠标事件类似，这些属性表示触摸点相对于浏览器窗口可视区域的坐标。 ```javascript $("#flipbook").on("touchstart", function(event) { var touch = event.originalEvent.changedTouches[0]; var startX = touch.clientX; // 触摸事件的X坐标 console.log("startX:", startX); }); ``` 请注意，以上代码仅适用于获取相对于浏览器窗口可视区域的坐标。如果你需要获取相对于整个页面的坐标，你可能需要结合页面滚动的位置来计算。 如果以上方法仍然无法获取到所需的坐标信息，请提供更多关于你正在处理的事件类型和代码上下文的细节，以便我们给出更具体的解决方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值