基于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 Firefox3.5中操作select的问题
Jul 10 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
微信小程序实现上传图片功能
May 28 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
详解React 条件渲染
Jul 08 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 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获取随机数字和字母的方法详解
2013/06/06 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
js基于canvas实现时钟组件
2021/02/07 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python实现网站微信登录的示例代码
2019/09/18 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
党员倡议书
2015/01/19 职场文书
财务人员岗位职责
2015/02/03 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Python 多线程处理任务实例
2021/11/07 Python
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python