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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
JQuery 常用方法基础教程
Feb 06 Javascript
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
webpack优化的深入理解
Dec 10 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 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
Terran剧情介绍
2020/03/14 星际争霸
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
PHP5函数小全(分享)
2013/06/06 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php获取参数的几种方法总结
2014/02/18 PHP
javascript各种复制代码收集
2008/09/20 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
vue-cli如何快速构建vue项目
2017/04/26 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
决策树的python实现方法
2014/11/18 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
会计与审计毕业生自荐信范文
2013/12/30 职场文书
公司离职证明范本
2014/01/13 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
个人委托书范本
2014/04/02 职场文书
植树节活动总结
2014/04/30 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
材料员岗位职责范本
2015/04/11 职场文书
小学信息技术教学反思
2016/02/16 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle