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 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
javaScript基础语法介绍
Feb 28 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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的一些基础知识分享
2011/07/27 PHP
php去除重复字的实现代码
2011/09/16 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
input的focus方法使用
2010/03/13 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
python操作cfg配置文件方式
2019/12/22 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
python实现五子棋程序
2020/04/24 Python
pandas的resample重采样的使用
2020/04/24 Python
一份软件工程师的面试试题
2016/02/01 面试题
应届生煤化工求职信
2013/10/21 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
甘南现象心得体会
2014/09/11 职场文书
2015年化验室工作总结
2015/04/23 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
Python制作动态字符画的源码
2021/08/04 Python