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判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
详解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 定界符格式引起的错误
2011/05/24 PHP
有关php运算符的知识大全
2011/11/03 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
js实现拖拽效果
2015/02/12 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
20年同学聚会邀请函
2014/02/04 职场文书
保护环境的建议书
2014/03/12 职场文书
团购业务员岗位职责
2014/03/15 职场文书
市场策划求职信
2014/08/07 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
MySQL多表查询机制
2022/03/17 MySQL
Python学习之os包使用教程详解
2022/03/21 Python