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控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
原生js滑动轮播封装
Jul 31 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 json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
ECMAScript 基础知识
2007/06/29 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
python字典基本操作实例分析
2015/07/11 Python
python如何读写csv数据
2018/03/21 Python
python实现括号匹配的思路详解
2018/08/23 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python 串口读写的实现方法
2019/06/12 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
节约用水倡议书
2014/04/16 职场文书
施工安全承诺书
2014/05/22 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python