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 相关文章推荐
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
JScript实现地址选择功能
Aug 15 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
PHP中PDO的错误处理
2011/09/04 PHP
php中引用符号(&)的使用详解
2013/11/13 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
我就是这样学习Python中的列表
2019/06/02 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Python简单实现区域生长方式
2020/01/16 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
财务信息服务专业自荐书范文
2014/02/08 职场文书
外国人聘用意向书
2014/04/01 职场文书
高考寄语大全
2014/04/08 职场文书
小学德育工作总结2015
2015/05/12 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书