基于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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
利用js对象弹出一个层
Mar 26 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
用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下网站防IP攻击代码,超级实用
2010/10/24 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python-基础-入门 简介
2014/08/09 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
python数据结构之链表详解
2017/09/12 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Pandas中resample方法详解
2019/07/02 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
蛋白质世界:Protein World
2017/11/23 全球购物
服务中心夜班服务员岗位职责
2013/11/27 职场文书
话题作文之呼唤
2019/12/18 职场文书