首先,这些属性都是 MouseEvent 对象的属性,表示事件发生时鼠标的位置信息。
接下来,我们逐个来分析一下这些属性的区别。
- clientX
clientX
表示事件发生时,鼠标在浏览器视口中的水平坐标。也就是说,它是相对于浏览器窗口左上角的水平距离。
下面是一个示例:
<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
<script>
document.querySelector('#box').addEventListener('click', function(event) {
console.log(`clientX: ${event.clientX}`);
});
</script>
</div>
当在 #box
内点击时,会在控制台输出鼠标在浏览器视口中的水平坐标。
- pageX
pageX
表示事件发生时,鼠标在文档中的水平坐标。也就是说,它是相对于文档左上角的水平距离。在浏览器滚动的情况下,它的值会包括滚动距离。
下面是一个示例:
<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
<script>
document.querySelector('#box').addEventListener('click', function(event) {
console.log(`pageX: ${event.pageX}`);
});
</script>
</div>
当在 #box
内点击时,会在控制台输出鼠标在文档中的水平坐标。
- offsetX
offsetX
表示事件发生时,鼠标相对于事件对象的内部元素的水平坐标。
下面是一个示例:
<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
<script>
document.querySelector('#box').addEventListener('click', function(event) {
console.log(`offsetX: ${event.offsetX}`);
});
</script>
</div>
当在 #box
内点击时,会在控制台输出鼠标相对于 #box
元素的水平坐标。
-
x
x
是pageX
的别名,表示事件发生时鼠标在文档中的水平坐标。在某些浏览器中,可能没有pageX
属性,所以可以使用x
来代替。 -
layerX
layerX
已经被废弃,但是在一些老的浏览器中仍然可以使用。它表示事件发生时,鼠标在相对于事件的目标元素的水平坐标。
下面是一个示例:
<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
<script>
document.querySelector('#box').addEventListener('click', function(event) {
console.log(`layerX: ${event.layerX}`);
});
</script>
</div>
当在 #box
内点击时,会在控制台输出鼠标相对于事件目标元素 #box
的水平坐标。
- screenX
screenX
表示事件发生时,鼠标在屏幕中的水平坐标。也就是说,它是相对于屏幕左上角的水平距离。
下面是一个示例:
<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
<script>
document.querySelector('#box').addEventListener('click', function(event) {
console.log(`screenX: ${event.screenX}`);
});
</script>
</div>
当在 #box
内点击时,会在控制台输出鼠标在屏幕中的水平坐标。
- offsetLeft
offsetLeft
表示元素相对于其最近的已定位祖先元素的左外边框的距离,单位为像素。
下面是一个示例:
<div id="container" style="position: relative; left: 50px; top: 50px;">
<div id="box" style="width: 100px; height: 100px; border: 1px solid #000;"></div>
<script>
document.querySelector('#box').addEventListener('click', function(event) {
console.log(`offsetLeft: ${event.target.offsetLeft}`);
});
</script>
</div>
当在 #box
内点击时,会在控制台输出 #box
相对于 #container
的左外边框的距离。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析 - Python技术站