基于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 相关文章推荐
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
解决option标签selected="selected"属性失效的问题
Nov 06 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
Vue的props父传子的示例代码
May 20 Javascript
javascript实现前端input密码输入强度验证
Jun 24 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源代码
2006/10/09 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
浅析Jquery操作select
2016/12/13 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
python 安装移动复制第三方库操作
2020/07/13 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
.net C#面试题
2012/08/28 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
2014年校长工作总结
2014/12/11 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
nginx设置资源请求目录的方式详解
2022/05/30 Servers