基于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下通过getList函数实现分页效果的代码
Sep 17 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 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 session会话的安全性分析
2011/09/08 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
vue keep-alive的简单总结
2021/01/25 Vue.js
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
python实现批量改文件名称的方法
2015/05/25 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python 字符串格式化的示例
2020/09/21 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
资产经营总监岗位职责范文
2013/12/01 职场文书
学校教研活动总结
2014/07/02 职场文书
聘用合同范本
2015/09/21 职场文书
四年级作文之植物
2019/09/20 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
服务器SVN搭建图文安装过程
2022/06/21 Servers