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 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
图解JavaScript中的this关键字
May 28 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
从0开始学Vue
Oct 27 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
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/04/24 PHP
基于php缓存的详解
2013/05/15 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
Python函数式编程指南(四):生成器详解
2015/06/24 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
python PIL模块的基本使用
2020/09/29 Python
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
班组长岗位职责范本
2014/01/05 职场文书
《开国大典》教学反思
2014/04/19 职场文书
新学期家长寄语2016
2015/12/03 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS