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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
js取模(求余数)隔行变色
May 15 Javascript
javascript折半查找详解
Jan 26 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 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应用JSON技巧讲解
2013/02/03 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
JS中如何设置readOnly的值
2013/12/25 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
专升本个人自我评价
2013/12/22 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
考研英语复习计划
2015/01/19 职场文书
改进工作作风心得体会
2016/01/23 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
无线电知识基础入门篇
2022/02/18 无线电