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 判断数组是否已包含了某个元素的函数
May 30 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
js打开word文档预览操作示例【不是下载】
May 23 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入门速成教程
2007/03/19 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python制作简易注册登录系统
2016/12/15 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
Python devel安装失败问题解决方案
2020/06/09 Python
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
《伯牙绝弦》教学反思
2014/03/02 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
亲子活动总结
2014/04/26 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
服务员态度差检讨书
2014/10/28 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
教师网络培训心得体会
2016/01/09 职场文书
Java Spring读取和存储详细操作
2022/08/05 Java/Android