基于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 相关文章推荐
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
浅析JavaScript动画
Jun 10 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Python Socket使用实例
2017/12/18 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python单链表原理与实现方法详解
2020/02/22 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
校三好学生主要事迹
2014/01/11 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
法学专业求职信范文
2015/03/19 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
数据设计之权限的实现
2022/08/05 MySQL