基于JavaScript获取鼠标位置的各种方法


Posted in Javascript onDecember 16, 2015

在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容

鼠标点击位置坐标

相对于屏幕

如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致。

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.screenX,'y':screenY}
    }

相对浏览器窗口

简单代码即可实现,然而这是还不够,因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标,event的clientX,clientY属性分别表示鼠标点击位置相对于文档的左边距,上边距。于是类似的我们写出了这样的代码

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.clientX,'y':clientY}
    }

相对文档

简单测试也没什么问题,但是clientX与clientY获取的是相对于当前屏幕的坐标,忽略页面滚动因素,这在很多条件下很有用,但当我们需要考虑页面滚动,也就是相对于文档(body元素)的坐标时怎么办呢?加上滚动的位移就可以了,下边我们试试怎么计算页面滚动的位移。

其实在Firefox下问题会简单很多,因为Firefox支持属性pageX,与pageY属性,这两个属性已经把页面滚动计算在内了。

在Chrome可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移,而在IE下可以通过document.documentElement.scrollLeft ,document.documentElement.scrollTop

function getMousePos(event) {
      var e = event || window.event;
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
      var x = e.pageX || e.clientX + scrollX;
      var y = e.pageY || e.clientY + scrollY;
      //alert('x: ' + x + '\ny: ' + y);
      return { 'x': x, 'y': y };
    }

以上内容是小编给大家介绍的基于JavaScript获取鼠标位置的各种方法,希望大家喜欢。

Javascript 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
JSON 数据格式详解
Sep 13 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 #Javascript
javascript数组克隆简单实现方法
Dec 16 #Javascript
Perl Substr()函数及函数的应用
Dec 16 #Javascript
javascript针对不确定函数的执行方法
Dec 16 #Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 #Javascript
js如何判断输入字符串长度
Dec 16 #Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 #Javascript
You might like
从手册去理解分析PHP session机制
2011/07/17 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
vue实现弹幕功能
2019/10/25 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
python封装对象实现时间效果
2020/04/23 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python实现登录接口的示例代码
2017/07/21 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Java程序开发中如何应用线程
2016/03/03 面试题
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
《我要的是葫芦》教学反思
2014/02/23 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
机电一体化求职信
2014/03/10 职场文书
结对共建协议书
2014/08/20 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS