快捷導(dǎo)航

js實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置

更新時(shí)間：2016年12月14日 15:35:19 作者：淺岸

本文主要介紹了利用javascript實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置的具體方法，具有很好的參考作用，需要的朋友可以看看

有時(shí)候，我們需要得到窗口拖動(dòng)或者鼠標(biāo)移動(dòng)的距離，此時(shí)可以通過(guò)計(jì)算鼠標(biāo)前后在頁(yè)面中的位置來(lái)得到想要的結(jié)果，下面介紹幾個(gè)事件屬性:

1、客戶區(qū)坐標(biāo)位置

鼠標(biāo)事件都是在瀏覽器視口中的特定位置上發(fā)生的。這個(gè)位置信息保存在事件對(duì)象的 clientX 和 clientY 屬性中。它們的值表示事件發(fā)生時(shí)鼠標(biāo)指針在視口中的水平和垂直坐標(biāo)（不包括頁(yè)面滾動(dòng)的距離）。如下圖所示：

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)表示獲取事件對(duì)象。EventUtil是自定義的事件對(duì)象（使用JavaScript實(shí)現(xiàn)），里面包含了一些跨瀏覽器的方法，具體實(shí)現(xiàn)，請(qǐng)看另一篇文章《js 實(shí)現(xiàn)一些跨瀏覽器的事件方法詳解及實(shí)例》。如果項(xiàng)目使用了jQuery插件，可相應(yīng)的替換成對(duì)應(yīng)的方法。

2、頁(yè)面坐標(biāo)位置

事件對(duì)象屬性pageX 和pageY，能告訴你事件是在頁(yè)面中的什么位置發(fā)生的。換句話說(shuō)，這兩個(gè)屬性表示鼠標(biāo)光標(biāo)在頁(yè)面中的位置（相當(dāng)于鼠標(biāo)在窗口中的位置坐標(biāo) + 頁(yè)面滾動(dòng)的距離）。

var div = document.getElementById("myDiv");//獲取id為"myDiv"的元素
EventUtil.on(div, "click", function(event){//為元素綁定click事件
 event = EventUtil.getEvent(event);//獲取event事件對(duì)象
 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、屏幕坐標(biāo)位置

通過(guò)screenX和screenY屬性就可以確定鼠標(biāo)事件發(fā)生時(shí)鼠標(biāo)指針相對(duì)于整個(gè)屏幕的坐標(biāo)信息。如下圖所示：

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

文章參考自《JavaScript高級(jí)程序設(shè)計(jì)第三版》

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: