基于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 字符串连接性能优化
Dec 20 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
十天学会php(2)
2006/10/09 PHP
php str_pad 函数使用详解
2009/01/13 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
python绘制条形图方法代码详解
2017/12/19 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python实现串口通信的示例代码
2020/02/10 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
新学期班主任寄语
2014/01/18 职场文书
九年级历史教学反思
2014/01/27 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
保护地球的宣传语
2015/07/13 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js