分享免费的编程资源和教程

网站首页 > 技术教程 正文

js之获取鼠标位置及clientX,pageX,,offsetX,screenX区别详解

goqiw 2024-10-20 07:21:07 技术教程 13 ℃ 0 评论

觉得写的可以的同学请点一手关注，每天分享大量前端知识

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

事件对象

当事件的响应函数被触发时，浏览器都会将一个事件对象作为实参传递给响应函数

在事件对象封装了当前事件的一切信息，比如鼠标坐标，是否被按下，键盘是否按下等

比如这就是一个响应函数

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

实验

1
 <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是鼠标相对于屏幕的坐标，包括浏览器上面的工具栏和滚动

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表