【JS 面试题】理解 e.clientXY 和 e.pageXY：鼠标坐标详

最新推荐文章于 2024-07-31 16:33:32 发布

酷码编程接单空间

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量224

点赞数 3

文章标签： javascript 计算机外设开发语言 html css js

本文链接：https://blog.csdn.net/qq_33877849/article/details/140813645

版权

理解 `e.clientXY` 和 `e.pageXY`：鼠标坐标详解

在这里插入图片描述

在Web开发中，处理鼠标事件是常见的任务。要正确响应这些事件，我们经常需要知道鼠标光标在页面上的具体位置。JavaScript事件对象提供了多个属性来获取这些坐标信息，其中最常用的是e.clientX和e.pageX。本文将详细解释这两个属性的区别和用途。

`e.clientX`：相对于视口的坐标

e.clientX属性返回鼠标指针的水平坐标，相对于浏览器视口（viewport）的左上边缘。视口是指浏览器窗口中可用于显示网页内容的区域，不包括滚动条。

特点：

坐标原点位于视口左上角。
当用户滚动页面时，坐标值会随着视口的移动而改变。

使用场景：

当需要相对于浏览器窗口而非整个文档获取鼠标位置时。

`e.pageX`：相对于文档的坐标

与e.clientX不同，e.pageX属性返回鼠标指针的水平坐标，相对于整个文档的左边缘。这意味着无论页面如何滚动，e.pageX的值都不会改变。

特点：

坐标原点位于文档左上角。
不受页面滚动的影响。

使用场景：

当需要获取鼠标相对于整个文档的位置，而不考虑页面滚动时。

示例

假设有一个全屏的页面，用户在页面上点击鼠标。我们想要获取点击位置的坐标：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MouseEvent Coordinates Example</title>
    <style>
        body {
            margin: 0;
            height: 2000px; /* 让页面足够长，可以滚动 */
        }
        #click-info {
            position: fixed;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>

<div id="click-info">点击页面上的任何地方</div>

<script>
document.addEventListener('click', function(e) {
    const clickInfo = document.getElementById('click-info');
    clickInfo.textContent = `
        e.clientX: ${e.clientX},
        e.pageX: ${e.pageX} `;
        
    
     

    clickInfo.textContent += `
        e.clientY: ${e.clientY},
        e.pageY: ${e.pageY}
`;
});
</script>

</body>
</html>

示例说明：

页面很长，可以滚动。
点击页面任何地方，会显示e.clientX和e.pageX的值。
滚动页面并再次点击，观察两个值的变化。

结论

e.clientX和e.pageX都是获取鼠标点击事件中鼠标位置的有用属性。选择使用哪一个取决于你是需要相对于浏览器视口的位置，还是相对于整个文档的位置。理解它们的区别可以帮助你更准确地处理鼠标事件，实现所需的交互效果。

酷码编程接单空间

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
【JS 面试题】理解 e.clientXY 和 e.pageXY：鼠标坐标详

在Web开发中，处理鼠标事件是常见的任务。要正确响应这些事件，我们经常需要知道鼠标光标在页面上的具体位置。JavaScript事件对象提供了多个属性来获取这些坐标信息，其中最常用的是和。本文将详细解释这两个属性的区别和用途。属性返回鼠标指针的水平坐标，相对于浏览器视口（viewport）的左上边缘。视口是指浏览器窗口中可用于显示网页内容的区域，不包括滚动条。与不同，属性返回鼠标指针的水平坐标，相对于整个文档的左边缘。这意味着无论页面如何滚动，的值都不会改变。假设有一个全屏的页面，用户在页面上点击鼠标。我们想
复制链接

扫一扫