在一些 DOM 操作中我们经常会跟元素的位置打交道, 鼠标交互式一个经常用到的方面, 令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果, 这篇文章就鼠标点击位置坐标获取做一些简单的总结.
获取鼠标位置首先要了解什么是 event,event 是一个声明了全局变量的一个对象, 在 Chrome 和 IE 下, 可以随意访问, 对于好奇的朋友 console.log 一下 event. 但!!!Firefox 下是没有 event 这个对象的!!
好消息的是: 在 IE8,Chrome 下, 是有 event 这个对象的!
鼠标点击位置坐标
相对于屏幕
如果是涉及到鼠标点击确定位置相对比较简单, 获取到鼠标点击事件后, 事件 screenX,screenY 获取的是点击位置相对于屏幕的左边距与上边距, 不考虑 iframe 因素, 不同游览器下表现的还算一致.
- function getMousePos(event) {
- var e = event || Windows.event;
- return {'x':e.screenX,'y':screenY}
- }
相对于游览器窗口
简单代码即可实现, 然而这时还不够, 因为绝大多数情况下我们希望获取鼠标点击位置相对于游览器窗口的坐标, event 的 clientX,clientY 属性分别表示鼠标点击位置相对于文档的左边距, 上边距.
- function getMousePos(event) {
- var e = event || Windows.event;
- return {'x':e.clientX,'y':clientY}
- }
相对于文档
clientX 与 clientY 是获取相对于当前屏幕的坐标, 忽略了页面滚动因素, 这在很多环境下很有用, 但当我们需要考虑页面滚动, 也就是相对于文档 (body 元素) 的坐标时怎么办呢? 只要加上滚动的位移就可以了.
在 Chrome 可以通过 document.body.scrollLeft,document.body.scrollTop 计算出页面滚动位移, 而在 IE 下可以通过 document.documentElement.scrollLeft,document.documentElement.scrollTop
- function getMousePos(event) {
- var e = event || Windows.event;
- var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
- var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
- var x = e.pageX || e.clientX + scrollX;
- var y = e.pageY || e.clientY + scrollY;
- //alert('x:' + x + '\ny:' + y);
- return { 'x': x, 'y': y };
- }
来源: https://www.2cto.com/kf/201809/779183.html