JavaScript 获取鼠标位置实例代码(兼容 IE 与 Firefox)
作者:页面旅途时间:2026-10-27 13:06:09浏览:271
本文提供一段 JavaScript 代码,用于获取鼠标在页面中的 X 和 Y 坐标。该示例通过 document.onmousemove 事件监听鼠标移动,并处理了不同浏览器对 pageX/pageY 与 clientX/clientY 及滚动条偏移量的差异,实现了在 IE 和 Firefox 下的兼容。
结束代码块,标记为复制代码。
JavaScript 获取鼠标坐标兼容实现
具体实现代码如下:
定义变量 xPos 用于存储横坐标。
定义变量 yPos 用于存储纵坐标。
将 mouseMove 函数绑定到 document 的 onmousemove 事件,以监听鼠标移动。
定义 mouseMove 函数,接收事件对象 ev 作为参数。
兼容处理:若 ev 未定义,则使用 window.event。
调用 mouseCoords 函数获取鼠标坐标对象,赋值给 mousePos。
将 mousePos.x 赋值给 xPos,记录横坐标。
将 mousePos.y 赋值给 yPos,记录纵坐标。
}
定义 mouseCoords 函数,用于计算并返回鼠标坐标。
判断 ev.pageX 和 ev.pageY 是否存在(即非 undefined)。
若存在,直接返回包含 pageX 和 pageY 的对象。
}
否则,返回包含修正后坐标的对象。
横坐标计算:ev.clientX 加上 document.body.scrollLeft 和 document.documentElement.scrollLeft。
纵坐标计算:ev.clientY 加上 document.body.scrollTop 和 document.documentElement.scrollTop。
};
} 作者最新文章
JS监听滚动事件:回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比:轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么?前端开发中的作用与应用场景解析
2026-11-04 23:17:54
