JavaScript 获取鼠标位置实例代码(兼容 IE 与 Firefox)

作者:页面旅途

时间:2026-10-27

浏览:270

本文提供一段 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。
}; 
} 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章