基于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 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
layui弹出层效果实现代码
May 19 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
Promise扫盲贴
Jun 24 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 轻松解析 XML
2006/12/04 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
Javascript学习笔记二 之 变量
2010/12/15 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
python抓取网页中的图片示例
2014/02/28 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
python 如何快速复制序列
2020/09/07 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
护士长竞聘书
2014/03/31 职场文书
五年级学生评语
2014/04/22 职场文书
留学生求职信
2014/06/03 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
python 中yaml文件用法大全
2021/07/04 Python
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers