基于JavaScript实现 获取鼠标点击位置坐标的方法


Posted in Javascript onApril 12, 2013

在一些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 synat:auto semicolon insertion)
Nov 04 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 #Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 #Javascript
关于JavaScript中string 的replace
Apr 12 #Javascript
关于JavaScript与HTML的交互事件
Apr 12 #Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 #Javascript
js实现单一html页面两套css切换代码
Apr 11 #Javascript
获取内联和链接中的样式(js代码)
Apr 11 #Javascript
You might like
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
javascript:void(0)使用探讨
2013/08/27 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
python实现宿舍管理系统
2019/11/22 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python如何将模块打包并发布
2020/08/30 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
农村面貌改造提升实施方案
2014/03/18 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
2014年宣传工作总结
2014/11/18 职场文书