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 相关文章推荐
Javascript delete 引用类型对象
Nov 01 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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
php计算整个目录大小的方法
2015/06/01 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
python删除文件示例分享
2014/01/28 Python
pygame播放音乐的方法
2015/05/19 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Windows下python3.7安装教程
2018/07/31 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
中国电视购物:快乐购
2017/02/04 全球购物
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
信访工作者先进事迹
2014/01/17 职场文书
大学军训感言1000字
2014/02/25 职场文书
少先队活动总结
2014/08/29 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
教师节主持词开场白
2015/05/29 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript