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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
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
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
JSONP之我见
2015/03/24 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
python 使用get_argument获取url query参数
2017/04/28 Python
Python设计密码强度校验程序
2020/07/30 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
Linux文件系统类型
2012/02/15 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
自我鉴定模板
2013/10/29 职场文书
学校采购员岗位职责
2014/01/02 职场文书
求职简历自我评价范例
2014/03/12 职场文书
2015年班干部工作总结
2015/04/29 职场文书
售后服务质量承诺书
2015/04/29 职场文书
企业宣传语大全
2015/07/13 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技