js实现获取鼠标当前的位置


Posted in Javascript onDecember 14, 2016

有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性:

1、客户区坐标位置

鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中。它们的值表示事件发生时鼠标指针在视口中的水平垂直坐标(不包括页面滚动的距离)。如下图所示:

js实现获取鼠标当前的位置

var div = document.getElementById("myDiv"); //获取元素
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});

:其中,EventUtil.on()表示为元素绑定事件,EventUtil.getEvent(event)表示获取事件对象。EventUtil是自定义的事件对象(使用JavaScript实现),里面包含了一些跨浏览器的方法,具体实现,请看另一篇文章《js 实现一些跨浏览器的事件方法详解及实例》。如果项目使用了jQuery插件,可相应的替换成对应的方法。

2、页面坐标位置

事件对象属性pageXpageY,能告诉你事件是在页面中的什么位置发生的。换句话说,这两个属性表示鼠标光标在页面中的位置(相当于鼠标在窗口中的位置坐标 + 页面滚动的距离)。

var div = document.getElementById("myDiv");//获取id为"myDiv"的元素
EventUtil.on(div, "click", function(event){//为元素绑定click事件
 event = EventUtil.getEvent(event);//获取event事件对象
 var pageX = event.pageX,pageY = event.pageY;
 if (pageX === undefined){//IE8及更早版本
 pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 }
 if (pageY === undefined){
 pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
 }
 alert("Page coordinates: " + pageX + "," + pageY);
});

3、屏幕坐标位置

通过screenXscreenY属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。如下图所示:

js实现获取鼠标当前的位置

var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});

文章参考自《JavaScript高级程序设计第三版》

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js 回车提交表单两种实现方法
Dec 31 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
js清空form表单中的内容示例
May 20 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
Js经典案例的实例代码
May 10 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
详解vue.js组件化开发实践
Dec 14 #Javascript
JavaScript Ajax实现异步通信
Dec 14 #Javascript
微信小程序 配置文件详细介绍
Dec 14 #Javascript
微信小程序 闭包写法详细介绍
Dec 14 #Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 #Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 #Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 #Javascript
You might like
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python中的函数用法入门教程
2014/09/02 Python
Python中的日期时间处理详解
2016/11/17 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Python中的 enum 模块源码详析
2019/01/09 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
社区安全检查制度
2014/02/03 职场文书
职称评定自我鉴定
2014/03/18 职场文书
服务行业口号
2014/06/11 职场文书
上海世博会口号
2014/06/19 职场文书
关键在于落实心得体会
2014/09/03 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
2015年小学开学寄语
2015/02/27 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python