js获取鼠标位置实例详解


Posted in Javascript onDecember 09, 2015

本文实例讲述了js获取鼠标位置的方法。分享给大家供大家参考,具体如下:

用 javascript 获取当前页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等。当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同,这里详细介绍了浏览器在处理这些属性时的差异和最终的解决方法。

Javascript代码如下:

<script type="text/javascript">
// 说明:获取鼠标位置
// 整理:http://www.codebit.cn
// 来源:http://www.webreference.com
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>

使用方式:

document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
}

关于代码的详细说明如下:

我们首先要声明一个 evnet 对象,无论移动、点击、按键等,都会激活一个 evnet ,在 Internet Explorer 里, event 是全局变量,会被存储在 window.event 里. 在 firefox 或者其他浏览器,event 会被相应的函数获取.当我们将mouseMove函数赋值于document.onmousemove,mouseMove 会获取鼠标移动事件。

为了让 ev 在所有浏览器下获取了 event 事件,在Firefox下"||window.event"将不起作用,因为ev已经有了赋值。在 MSIE 中 ev 为空,所以得到 window.event 。

因为在这篇文章中我们需要多次获取鼠标位置,所以我们设计了一个 mousePosition 函数,它包含一个参数 : event 。

因为我们要在 MSIE 和其他浏览器下运行,Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置,如果你有一个 500*500 的窗口并且你的鼠标在绝对中间,那么 pageX 和 pageY 的值都是 250,如果你向下滚动 500, 那么 pageY 将变成 750。

MSIE 正好相反,它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置,而不是文档。在同样的例子中,如果你向下滚动500,clientY 依然是 250,因此,我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后,MSIE 中文档并不是从 0,0 开始,而是通常有一个小的边框(通常是 2 象素),边框的大小定义在 document.body.clientLeft 和 clientTop 中,我们也把这些加进去。

完成代码:

<script type="text/javascript">
// 说明:获取鼠标位置
// 整理:http://www.codebit.cn
// 来源:http://www.webreference.com
function mousePosition(ev){
   if(ev.pageX || ev.pageY){
     return {x:ev.pageX, y:ev.pageY};
   }
   return {
     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
     y:ev.clientY + document.body.scrollTop - document.body.clientTop
   };
}
document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
   document.getElementByIdx('mouseXPosition').value = mousePos.x;
   document.getElementByIdx('mouseYPosition').value = mousePos.y;
}
</script>

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

Javascript 相关文章推荐
js 表单验证方法(实用)
Apr 28 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
JavaScript常用基础知识强化学习
Dec 09 #Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 #Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 #Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 #Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 #Javascript
javascript如何写热点图
Dec 08 #Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 #Javascript
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP邮件专题
2006/10/09 PHP
php中$this-&amp;gt;含义分析
2009/11/29 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
js实现左右轮播图
2020/01/09 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
Django forms组件的使用教程
2018/10/08 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
PHP如何防止SQL注入
2014/05/03 面试题
销售助理岗位职责
2014/02/21 职场文书
Python 中random 库的详细使用
2021/06/03 Python
关于MySQL中的 like操作符详情
2021/11/17 MySQL