js實現擷取滑鼠當前的位置_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進階程式設計第三版》

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的協助，同時也希望多多支援雲棲社區！