首頁 > web前端 > js教程 > 主體

js取得滑鼠點擊的位置實現想法及程式碼_javascript技巧

WBOY
發布: 2016-05-16 16:49:08
原創
1530 人瀏覽過

copy來的,但是原頁面的程式碼還是需要修改,下面是修改可用的

常用的是event.clientX和event.clientY分別取得橫向的和縱向的位置,但僅使用這個方法是不夠的,因為event.clientX和event.clientY取得的滑鼠位置是相對於目前畫面的,而不考慮頁面的捲軸所滾動的距離。

複製程式碼 程式碼如下:

function pointerX(event)
{
return event.pageX || (event.clientX (document.documentElement.scrollLeft || document.body.scrollLeft));
}

function pointerY(event)
{
return eventf .pageY || (event.clientY (document.documentElement.scrollTop || document.body.scrollTop));
}

兩個方法分別獲得相對整個頁面(而不是螢幕)的滑鼠位置

event.pageX是在FF中所支援的,這樣就實作了跨瀏覽器操作

只需在其他方法中呼叫這兩個函數就可
複製程式碼 程式碼如下:

function getPointPosition(event)
{ event.clientX;
var y_px_scr = event.clientY;
alert("相對於目前畫面的X軸偏移" x_px_scr);//相對於裝置(PC或行動裝置)
alert("相對於目前螢幕的Y軸偏移量" y_px_scr);//相對於裝置(PC或行動裝置)
var x_Px_page = pointerX(event);
var y_Px_page = pointerY(event);
alert("相對於整個頁面的X軸偏移" x_Px_page); //相對於瀏覽器
alert( "相對於整個頁面的Y軸偏移" y_Px_page); //相對於瀏覽器
}

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板