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 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
JS实现百度搜索框关键字推荐
Feb 17 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之sphinx
2013/05/15 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
js分页工具实例
2015/01/28 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python实现批量下载文件
2015/05/17 Python
Python字符串处理实现单词反转
2017/06/14 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
班级活动策划书
2014/02/06 职场文书
网络宣传方案
2014/03/15 职场文书
保护母亲河倡议书
2014/04/14 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
消费者投诉书范文
2015/07/02 职场文书
创业计划书介绍
2019/04/24 职场文书
学校就业保障协议书
2019/06/24 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android