Javascript 获取鼠标当前的位置实现方法


Posted in Javascript onOctober 27, 2016

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

1、客户区坐标位置

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

Javascript 获取鼠标当前的位置实现方法

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实现),里面包含了一些跨浏览器的方法,具体实现,请看另一篇文章《一些跨浏览器的事件方法》。如果项目使用了jQuery插件,可相应的替换成对应的方法。

2、页面坐标位置

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

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、屏幕坐标位置

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

Javascript 获取鼠标当前的位置实现方法

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

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
JS实现打砖块游戏
Feb 14 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 #Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 #Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 #Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 #Javascript
简单理解vue中el、template、replace元素
Oct 27 #Javascript
深入理解JavaScript定时机制
Oct 27 #Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 #Javascript
You might like
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python3实现磁盘空间监控
2018/06/21 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
置业顾问岗位职责
2014/03/02 职场文书
新农村建设典型材料
2014/05/31 职场文书
班组长安全工作职责
2014/07/15 职场文书
营业员岗位职责范本
2015/04/14 职场文书
经理岗位职责范本
2015/04/15 职场文书
用人单位聘用意向书
2015/05/11 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL