本文由 DTcms素材网 – DT素材网 发布,转载请注明出处,如有问题请联系我们!JavaScript如何获取鼠标点击的位置?获取的三种方法汇总

收藏

其实我们一直都在dom中和元素打交道,这也是手机交互的一个比较常用的方面,但是很多程序员比较失望,在不同的浏览器中,会出现不同的结果,下面我们就来讲一下利用js如何获取鼠标点击的位置,并且为您总结详细的教程。

JavaScript如何获取鼠标点击的位置?获取的三种方法汇总

一:鼠标相对于屏幕

如果我们涉及在鼠标点击的位置,比较简单的话,我们就可以获取鼠标点击之后,利用screenX,screenY来确定点击的大致位置,从而判断出与屏幕的上边距和下边距的相对位置,我们不要考虑iframe等一些因素,但是在不同的浏览器中,表现还是很相同的。

例:

function getMousePos(event) {                   var e = event || window.event;                    return {'x':e.screenX,'y':screenY}   }

二:鼠标相对于浏览器的窗口

如果通过以上简单的代码来确定位置,往往这些都还不够,因为在大致的情况下,我们需要得到鼠标相对于浏览器窗口的坐标,分别获取到鼠标现对于窗口的的上边距和左边距,可以利用clientX,clientY表示。

例如:

function getMousePos(event) {                    var e = event || window.event;                    return {'x':e.clientX,'y':clientY}  }

三:鼠标相对于文档

我们可以利用clientX与clientY来得到当前浏览器窗口的坐标,但是这些条件都是由限制的,当我如出现在页面的滚动的情况下,那么相对于文档的坐标怎么办呢,这时候我们只要加上滚动的位移就可以了。

例如:

function getMousePos(event) {     var e = event || window.event;     var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;     var scrollY = document.documentElement.scrollTop || document.body.scrollTop;     var x = e.pageX || e.clientX + scrollX;     var y = e.pageY || e.clientY + scrollY;     //alert('x: ' + x + 'ny: ' + y);     return { 'x': x, 'y': y }; }

目前火狐浏览器的问题会简单的多,因为火狐支持pageX,与pageY这两个属性,已经把页面滚动计算在内了。

标签
DT素材网

DT素材网

183

0

0

( 此人很懒并没有留下什么~~ )