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 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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 加密解密内部算法
2010/04/22 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
详解Python中的条件判断语句
2015/05/14 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python引用计数操作示例
2018/08/23 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
最小二乘法及其python实现详解
2020/02/24 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
JAVA代码查错题
2014/10/10 面试题
食堂个人先进事迹
2014/01/22 职场文书
先进典型事迹材料
2014/12/29 职场文书
大一新生军训新闻稿
2015/07/17 职场文书