JavaScript 获取鼠标点击位置坐标

最新推荐文章于 2024-09-27 14:38:27 发布

深沉的简单

最新推荐文章于 2024-09-27 14:38:27 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： JavaScript 获取鼠标点击位置坐

本文链接：https://blog.youkuaiyun.com/u013861109/article/details/52728787

版权

本文总结了在不同浏览器下如何获取鼠标点击位置的坐标，包括相对于屏幕、浏览器窗口和文档的坐标。文章详细介绍了各种浏览器对event.screenX/Y、clientX/Y、pageX/Y、offsetX/Y、layerX等属性的支持情况，并提供了处理滚动位移的计算方法。

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

在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容

鼠标点击位置坐标

如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同浏览器下表现的还算一致。

function getMousePos(event) {
            var e = event || window.event;
            return {'x':e.screenX,'y':screenY}
        }

简单代码即可实现，然而这是还不够，因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标，event的clientX，clientY属性分别表示鼠标点击位置相对于文档的左边距，上边距。于是类似的我们写出了这样的代码

function