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 相关文章推荐
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
Javascript实现单例模式
Jan 24 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 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移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
测绘工程系学生的自我评价
2013/11/30 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
人事主管岗位职责
2014/01/30 职场文书
应用数学专业求职信
2014/03/14 职场文书
2014年三万活动总结
2014/04/26 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
工会经费申请报告
2015/05/15 职场文书
学会感恩主题班会
2015/08/12 职场文书