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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
改善用户体验的五款jQuery插件分享
May 22 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
浅析vue-router原理
Oct 19 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
Vue修改项目启动端口号方法
Nov 07 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
推荐文章系统(一)
2006/10/09 PHP
收集的DedeCMS一些使用经验
2007/03/17 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python requests获取网页常用方法解析
2020/02/20 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
毕业生求职信范文
2014/06/29 职场文书
特岗教师个人总结
2015/02/10 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
Mysql如何查看是否使用到索引
2022/12/24 MySQL