当前位置：首页 > 资讯 > 技术文档

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

时间：2020-03-14 08:44 编辑：来源：阅读：
扫一扫，手机访问

摘要：js实现获取鼠标当前的位置

有时候，我们需要得到窗口拖动或者鼠标移动的距离，此时可以通过计算鼠标前后在页面中的位置来得到想要的结果，下面介绍几个事件属性: [b]1、客户区坐标位置[/b] 鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中。它们的值表示事件发生时鼠标指针在[b]视口中的水平[/b]和[b]垂直坐标[/b]（不包括页面滚动的距离）。如下图所示： [img]http://files.jb51.net/file_images/article/201612/2016121415342623.png[/img]

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实现），里面包含了一些跨浏览器的方法，具体实现，请看另一篇文章《[url=http://www.1sucai.cn/article/95895.htm]js 实现一些跨浏览器的事件方法详解及实例[/url]》。如果项目使用了jQuery插件，可相应的替换成对应的方法。 [b]2、页面坐标位置[/b] 事件对象属性[b]pageX[/b] 和[b]pageY[/b]，能告诉你事件是在页面中的什么位置发生的。换句话说，这两个属性表示鼠标光标在页面中的位置（相当于鼠标在窗口中的位置坐标 + 页面滚动的距离）。

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);
});

[b]3、屏幕坐标位置[/b] 通过[b]screenX[/b]和[b]screenY[/b]属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。如下图所示： [img]http://files.jb51.net/file_images/article/201612/2016121415342624.png[/img]

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

文章参考自《[url=http://www.1sucai.cn/books/102318.html]JavaScript高级程序设计第三版[/url]》以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程素材网！

全部评论(0)

上一篇：javascript验证只能输入数字和一个小数点示例
下一篇：js 取时间差去掉周六周日实现代码

资讯排行榜
更多>>