基于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 相关文章推荐
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
jQuery中的select操作详解
Nov 29 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
JavaScript对象原型链原理详解
Feb 05 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
来自PHP.NET的入门教程
2006/10/09 PHP
php之XML转数组函数的详解
2013/06/07 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
金鑫耀Java笔试题
2014/09/06 面试题
什么是抽象
2015/12/13 面试题
竞聘书怎么写,如何写?
2014/03/31 职场文书
医疗纠纷协议书
2014/04/16 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
创业计划书之便利店
2019/09/05 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL