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 相关文章推荐
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
js实现分页功能
May 24 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
解决Mac node版本升级失败的问题
May 16 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
深入研究React中setState源码
2017/11/17 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
vue实现评论列表功能
2019/10/25 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
详解Vue之计算属性
2020/06/20 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python完全新手教程
2007/02/08 Python
Python采用raw_input读取输入值的方法
2014/08/18 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
What is view? why do we have view?
2012/06/22 面试题
小学毕业感言150字
2014/02/05 职场文书
商业融资计划书
2014/04/29 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
PHP命令行与定时任务
2021/04/01 PHP
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS