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 相关文章推荐
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
JS实现轮播图效果
Jan 11 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
JS新手入门数组处理的实用方法汇总
Apr 07 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
jquery的index方法实现tab效果
2011/02/16 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
推荐11个实用Python库
2015/01/23 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python批量解压zip文件的方法
2019/08/20 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
python解包用法详解
2021/02/17 Python
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
一名老师的自我评价
2014/02/07 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
个人务虚会发言材料
2014/10/20 职场文书
保护校园环境倡议书
2015/04/28 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
大学生读书笔记范文
2015/07/01 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
mysql主从复制的实现步骤
2021/10/24 MySQL