基于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 面向对象技术基础教程
Mar 03 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
layui获取多选框中的值方法
Aug 15 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
php绘制一条弧线的方法
2015/01/24 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
js表单验证实例讲解
2016/03/31 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
vue-router 组件复用问题详解
2018/01/22 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
vue 组件简介
2020/07/31 Javascript
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
美国精油公司:Plant Therapy
2019/05/17 全球购物
环境工程大学生个人的自我评价
2013/10/08 职场文书
销售顾问工作计划书
2014/09/15 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL