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 mobile changepage的三种传参方法介绍
Sep 13 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
php 用sock技术发送邮件的函数
2007/07/21 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
实例Python处理XML文件的方法
2015/08/31 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
python的socket编程入门
2018/01/29 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Python版中国省市经纬度
2020/02/11 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
有针对性的求职自荐信
2013/11/14 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
小学开学典礼主持词
2014/03/19 职场文书
大学生就业求职信
2014/06/12 职场文书
街道务虚会发言材料
2014/10/20 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
小学家庭教育心得体会
2016/01/14 职场文书