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 相关文章推荐
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
vue 组件开发原理与实现方法详解
Nov 29 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 身份验证方面的函数
2009/10/11 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
vue实现购物车小案例
2019/09/27 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Python如何生成xml文件
2020/06/04 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
中英双版中文教师求职信
2013/10/27 职场文书
自我鉴定200字
2013/10/28 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
单位未婚证明范本
2014/01/18 职场文书
日化店促销方案
2014/03/26 职场文书
社区志愿者培训方案
2014/06/10 职场文书
关于长城的导游词
2015/01/30 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
2015年财政所工作总结
2015/04/25 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js