浅谈clientX、offsetX、screenX、pageX

clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。

clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。

screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。

pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而变动，它在计算时其实是以body左上角原点（即页面本身的左上角，而不是浏览器可见区域的左上角）为参考点计算的，这个相当于已经把滚动条滚过的高或宽计算在内了，所以无论滚动条是否滚动，他都是一样的距离值。

可以自己写一下代码试验一下，自行加入其他元素

<!DOCTYPE html>
<html lang="en"><head><title>Mancuoj</title>
</head><body><p>移动鼠标看看：</p><p id="screen-log"></p><script>let screenLog = document.querySelector('#screen-log');document.addEventListener('mousemove', logKey);function logKey(e) {screenLog.innerText = `Screen X/Y: ${e.screenX}, ${e.screenY}Client X/Y: ${e.clientX}, ${e.clientY}Offset X/Y: ${e.offsetX}, ${e.offsetY}Page X/Y: ${e.pageX}, ${e.pageY}`;}</script>
</body></html>

浅谈clientX、offsetX、screenX、pageX相关推荐

区分event对象中的[clientX,offsetX,screenX,pageX]
前言在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientX eve ...
一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
先总结下区别:event.clientX.event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性event. ...
clientX,offsetX,pageX,screenX的异同以Chrome浏览器测试
clientX,offsetX,pageX,screenX的异同对于这个问题我相信有不少刚刚学习DOM事件的小伙伴可能会比较懵逼,首先我们从文字上解释它的异同首先我们要明确对于浏览器而言,它的X还 ...
js 事件回调函数的对象属性说明：clientX、screenX、offsetX、pageX
clientX 鼠标相对于浏览器左上角x轴的坐标: 不随滚动条滚动而改变: clientY 鼠标相对于浏览器左上角y轴的坐标: 不随滚动条滚动而改变: pageX 鼠标相对于浏览器左上角x轴的坐标: ...
2022-03-27 screenX和clientX的区别以及offsetX和pageX的区别
1.screenX和clientX的区别 screenX是电脑显示器原点(显示器左上角)到鼠标点击位置的距离 clientX是可视化窗口原点(网页左上角)到鼠标点击位置的距离 2.offsetX和pa ...
clientX,screenX,pageX,offsetX的区别
前言关于clientX,screenX,pageX,offsetX的区别之前也比较迷糊,然后自己写了几个demo算是弄明白了,在这记录一下. 定义一.clientX.clientY 点击位置距离当 ...
研究MouseEvent中的clientX、offsetX、pageX、screenX
很多时候需要在鼠标点击的时候获取点击的坐标来处理一些逻辑,有时候clientX.offsetX.pageX用的也不清楚,特此做了一个实验来记录. 1.含义 clientX 提供应用程序客户区域内发生事 ...
javascript 中 x offsetX clientX screenX pageX的区别
在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli ...
pageX,clientX,offsetX,layerX的区别
在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...

浅谈clientX、offsetX、screenX、pageX

浅谈clientX、offsetX、screenX、pageX相关推荐

最新文章

热门文章