Javascript 获取鼠标当前的位置实现方法
更新时间：2016年10月27日 17:29:47 投稿：lqh
这篇文章主要介绍了Javascript 获取鼠标当前的位置实现方法的相关资料,需要的朋友可以参考下
有时候，我们需要得到窗口拖动或者鼠标移动的距离，此时可以通过计算鼠标前后在页面中的位置来得到想要的结果，下面介绍几个事件属性:
1、客户区坐标位置
鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中。它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标（不包括页面滚动的距离）。如下图所示：
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 属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。如下图所示：
var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});
文章参考自《JavaScript高级程序设计第三版》
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了JS实现求5的阶乘,结合实例形式分析了javascript基于循环及递归等操作实现阶乘运算的相关技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了性能优化篇之Webpack构建代码质量压缩的建议，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
本文通过实例给大家介绍了SpringMVC+bootstrap-table,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了BooStrap对导航条的改造实践小结的相关资料,本文分步骤介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了JavaScript实现图片切换效果，以及自定义属性的应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要为大家详细介绍了Python实现学生成绩管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
javascript是弱类型的语言，所以强制类型转换还是比较重要的，下面看一下它的几个强制转换的函数2009-05-05
本文主要介绍js中call与apply关键字的作用以及它们的用法,具体实例如下,希望对大家有所帮助2016-11-11
JS可以实现很多java代码不易完成的功能,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你学会JavaScript计时事件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
网站可用性是任何网站的基本要素，而可用的导航更是网站所必需的要素之一。导航决定了用户如何与网站进行交互。如果没有了可用的导航，那么网站内容就会变得毫无用处。2011-09-09
最新评论