JavaScript获取鼠标相对于浏览器窗口坐标的方法
本文介绍如何使用JavaScript获取鼠标点击位置相对于浏览器窗口的坐标。通过兼容IE、Chrome和Firefox等不同浏览器的滚动条高度计算方式,结合pageX等属性,实现准确的坐标获取,并提供了相关开发工具链接供参考。
JavaScript获取鼠标位置距浏览器窗口距离的方法示例
本文详细介绍了一种通过JavaScript获取鼠标点击位置相对于浏览器窗口距离的方法,旨在为开发者提供实用的参考方案。
首先展示运行效果的截图,以便直观了解最终实现的功能表现。

具体的代码实现如下所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#test_div {
width:400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div id="test_div"></div>
</body>
<script type="text/javascript">
function mousePos(e){
e=e||window.event;
var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;//分别兼容ie和chrome
var scrollY=document.documentElement.scrollTop||document.body.scrollTop;
var x=e.pageX||(e.clientX+scrollX);//兼容火狐和其他浏览器
var y=e.pageY||(e.clientY+scrollY);
console.log(x,y);
return {x:x,y:y};
}
var test=document.querySelector("#test_div");
test.onclick=function(e){
mousePos(e);
}
</script>
</html>
在代码中,document.documentElement.scrollLeft和document.body.scrollLeft分别用于兼容IE和Chrome浏览器获取滚动条偏移量,而Firefox浏览器中可以直接使用pageX属性来获取页面滚动的距离。
此外,为了方便开发过程中的查阅,这里推荐两款在线参考工具。
javascript事件与功能说明大全: http://tools.jb51.net/table/javascript_event
键盘与鼠标按键的键值对照表: http://tools.jb51.net/table/key_codes_num
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript窗口操作与技巧汇总》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
anime.js 快速入门:怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码?结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率:window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33
