js实现了获取鼠标的当前位置

js实现了获取鼠标的当前位置

更新时间：2016年12月14日15:35:19作者：浅滩

本文主要介绍使用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实现），其中包含一些跨浏览器方法。有关特定的实现，请参阅另一篇文章“跨浏览器事件方法和示例的js实现”。如果项目使用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高级编程第三版”

以上是本文的全部内容。我希望本文的内容可以为每个人的学习或工作带来帮助。同时，我希望您能支持Script House！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-324019-1.html