JS获取鼠标位置距浏览器窗口距离的方法示例

作者：布瑞泽的童话时间：2024-04-19 10:06:14　

本文实例讲述了JS获取鼠标位置距浏览器窗口距离的方法。分享给大家供大家参考，具体如下：

先来看看运行效果图：

代码如下：

<!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的方法，而火狐中的pageX可以直接获取滑动的距离。

希望本文所述对大家JavaScript程序设计有所帮助。

标签：JS,鼠标,位置,窗口

投稿

JS获取鼠标位置距浏览器窗口距离的方法示例

猜你喜欢

Python编程通过懒属性提升性能

Python+selenium破解拼图验证码的脚本

Node.js和PHP根据ip获取地理位置的方法

详解go语言中sort如何排序

通过SQL Server的位运算功能巧妙解决多选查询方法

Python Django中的STATIC_URL 设置和使用方式

Python中关键字is与==的区别简述

Golang 按行读取文件的三种方法小结

MySQL重定位数据目录的方法

Django项目连接MongoDB的三种方法

Python工厂函数用法实例分析

pandas 数据结构之Series的使用方法

Pandas实现在线文件和剪贴板数据读取详解

Perl中的10个操作日期和时间的CPAN模块介绍

pytest中配置文件pytest.ini使用

python 网络编程详解及简单实例

Selenium 安装和简单使用的实现

Matplotlib控制坐标轴刻度间距与标签实例代码

设计师和美工

thinkPHP框架实现类似java过滤器的简单方法示例