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实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
vue中锚点的三种方法
Jul 06 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 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性能测试工具xhprof的详解
2013/06/03 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
Python代码的打包与发布详解
2014/07/30 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
python实现名片管理系统项目
2019/04/26 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
公司会议策划方案
2014/05/17 职场文书
论文诚信承诺书
2014/05/23 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js