js之获取鼠标在浏览器的位置及e.clientX,e.pageX,,e.offsetX,e.screenX区别

最新推荐文章于 2024-07-31 09:25:22 发布

原创最新推荐文章于 2024-07-31 09:25:22 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #鼠标事件 #坐标 #区别

前端同时被 3 个专栏收录

21 篇文章

订阅专栏

6 篇文章

订阅专栏

html

5 篇文章

订阅专栏

在浏览器中响应鼠标事件时，需综合考虑鼠标位置。当事件响应函数触发，浏览器会传递事件对象，其中封装了事件信息。在谷歌浏览器实验得出，e.clientX和e.pageX是鼠标相对窗口可视区域坐标，e.offsetX相对文档定位，e.screenX和e.screenY是相对屏幕坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在浏览器中有时候需要在响应鼠标的click，move，doubleclick等事件的同时，还需要去综合鼠标所在的位置，去考虑一些问题，首先我们要理解一些概念

事件对象

当事件的响应函数被触发时，浏览器都会将一个事件对象作为实参传递给响应函数
在事件对象封装了当前事件的一切信息，比如鼠标坐标，是否被按下，键盘是否按下等
比如这就是一个响应函数

xx = document.getElementById(n)
xx.onclick = function(e){
    e = e || window.e; //处理兼容性问题
    consolo.log(e.page.x);
    }

实验

   <style>
  /*   * {
            margin: 0;
            padding: 0;
        }  */
        
        #box {
            width: 500px;
            height: 500px;
            background: #ddd;
        }
    </style>


<body>
    <div id="box"></div>
    <script>
        xx = document.getElementById('box')
        xx.onclick = function(e) {
            e = e || window.e; //处理兼容性问题
            console.log('e.pageX:', e.pageX);
            console.log('e.clientX:', e.clientX);
            console.log('e.offsetX:', e.offsetX);
            console.log('e.screenX:', e.screenX);
        }
    </script>
</body>

实验

在谷歌浏览器中的结果，别的浏览器没试
在这里插入图片描述

得到以下结论

在谷歌浏览器中，e.clientX和e.pageX鼠标相对于浏览器窗口可视区域的X，Y坐标，可视区域不包括工具栏和滚动条，IE事件和标准事件支持.e.offsetX是相对于文档的定位，文档的左上角为(0,0)，向右为正，向下为正。e.screenX , e.screenY是鼠标相对于屏幕的坐标，包括浏览器上面的工具栏和滚动条。
更多前端资料请关注微信公众号：前端从入门到SP
扫描二维码关注公众号
在这里插入图片描述