Javascript在IE或Firefox下获取鼠标位置的代码


Posted in Javascript onDecember 18, 2009

第一段代码是利用全局变量来获取实时鼠标的位置。

var xPos; 
var yPos; 
window.document.onmousemove(function(evt){ 
evt=evt || window.event; 
if(evt.pageX){ 
xPos=evt.pageX; 
yPos=evt.pageY; 
} else { 
xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft; 
yPos=evt.clientY+document.body.scrollTop-document.body.clientTop; 
} 
});

因为IE和Firefox对clientX的解析不一样,IE认为clientX是鼠标相对整个页面左上角的位置,而Firefox认为是相对当前所见页面左上角的位置。而这段代码最终返回的结果是整个页面左上角的位置。这段代码的缺陷是,xPos和yPos是实时变动的。

第二段代码是通过函数获取当前时刻的鼠标坐标值

document.onmousemove = mouseMove; 
function mouseMove(ev){ 
ev = ev || window.event; 
var mousePos = mouseCoords(ev); 
} 
function mouseCoords(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 
}; 
}

这段代码的来源是这里,这个网站还提供了一些简单的样例给我们玩耍。这个函数和刚才的函数理论是一致的,先触发mousemove事件,然后获取了事件之后,分别判断浏览器类型。这段代码的优点是,不适用全局变量,并且可以随用随拿,只要调用这个函数,就能够获取鼠标坐标。

这两段代码,个人偏好于后者,现在先把这段代码记下来,这段代码应该是会经常被使用到的。

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
countUp.js实现数字滚动效果
Oct 18 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
Vue的props父传子的示例代码
May 20 Javascript
javascript 导出数据到Excel(处理table中的元素)
Dec 18 #Javascript
event.srcElement 用法笔记e.target
Dec 18 #Javascript
Javascript document.referrer判断访客来源网址
May 15 #Javascript
Javascript 中介者模式实例
Dec 16 #Javascript
js textarea自动增高并隐藏滚动条
Dec 16 #Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 #Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 #Javascript
You might like
php下删除字符串中HTML标签的函数
2008/08/27 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
js实现简易ATM功能
2020/10/27 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python内打印变量之%和f的实例
2020/02/19 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
小学校园活动策划
2014/01/30 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
学校招生宣传广告词
2014/03/19 职场文书
对祖国的寄语大全
2014/04/11 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫