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 数组实现一个类似ruby的迭代器
Oct 27 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
vue 注册组件的使用详解
May 05 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
js实现飞机大战游戏
Aug 26 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常用正则表达式的整理汇总
2013/06/08 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
斜45度寻路实现函数
2009/08/20 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
Script的加载方法小结
2011/01/12 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python读写文件方法总结
2015/06/09 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python中类的初始化特殊方法
2017/12/01 Python
基于Python List的赋值方法
2018/06/23 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Python中的asyncio代码详解
2019/06/10 Python
python3字符串操作总结
2019/07/24 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
意大利网上药房:Farmacia 33
2020/01/27 全球购物
非常详细的C#面试题集
2016/07/13 面试题
空乘英文求职信
2014/04/13 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python