js獲取鼠標(biāo)點擊的位置實現(xiàn)思路及代碼
更新時間:2014年05月09日 09:17:55 作者:
常用的是 event.clientX和event.clientY分別獲取橫向的和縱向的位置,但僅使用這個方法是不夠的,感興趣的朋友可以了解本文
copy來的,但是原頁面的代碼還是需要修改,下面是修改可用的
常用的是 event.clientX和event.clientY分別獲取橫向的和縱向的位置,但僅使用這個方法是不夠的,因為event.clientX和event.clientY獲取的鼠標(biāo)位置是相對于當(dāng)前屏幕的,而不考慮頁面的滾動條所滾動的距離。
function pointerX(event)
{
return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
}
function pointerY(event)
{
return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
}
兩個方法分別獲得相對整個頁面(而不是屏幕)的鼠標(biāo)位置
event.pageX是在FF中所支持的,這樣就實現(xiàn)了跨瀏覽器操作
只需在其他方法中調(diào)用這兩個函數(shù)就可
function getPointPosition(event)
{
var x_px_scr = event.clientX;
var y_px_scr = event.clientY;
alert("相對于當(dāng)前屏幕的X軸偏移量" + x_px_scr);<span style="font-family: tahoma, helvetica, arial;">//相對于設(shè)備(PC或移動設(shè)備)</span>
alert("相對于當(dāng)前屏幕的Y軸偏移量" + y_px_scr);//相對于設(shè)備(PC或移動設(shè)備)
var x_Px_page = pointerX(event);
var y_Px_page = pointerY(event);
alert("相對于整個頁面的X軸偏移量" + x_Px_page); //相對于瀏覽器
alert("相對于整個頁面的Y軸偏移量" + y_Px_page); //相對于瀏覽器
}
常用的是 event.clientX和event.clientY分別獲取橫向的和縱向的位置,但僅使用這個方法是不夠的,因為event.clientX和event.clientY獲取的鼠標(biāo)位置是相對于當(dāng)前屏幕的,而不考慮頁面的滾動條所滾動的距離。
復(fù)制代碼 代碼如下:
function pointerX(event)
{
return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
}
function pointerY(event)
{
return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
}
兩個方法分別獲得相對整個頁面(而不是屏幕)的鼠標(biāo)位置
event.pageX是在FF中所支持的,這樣就實現(xiàn)了跨瀏覽器操作
只需在其他方法中調(diào)用這兩個函數(shù)就可
復(fù)制代碼 代碼如下:
function getPointPosition(event)
{
var x_px_scr = event.clientX;
var y_px_scr = event.clientY;
alert("相對于當(dāng)前屏幕的X軸偏移量" + x_px_scr);<span style="font-family: tahoma, helvetica, arial;">//相對于設(shè)備(PC或移動設(shè)備)</span>
alert("相對于當(dāng)前屏幕的Y軸偏移量" + y_px_scr);//相對于設(shè)備(PC或移動設(shè)備)
var x_Px_page = pointerX(event);
var y_Px_page = pointerY(event);
alert("相對于整個頁面的X軸偏移量" + x_Px_page); //相對于瀏覽器
alert("相對于整個頁面的Y軸偏移量" + y_Px_page); //相對于瀏覽器
}
相關(guān)文章
JavaScript模擬深藍(lán)vs卡斯帕羅夫的國際象棋對局示例
這篇文章主要介紹了JavaScript模擬深藍(lán)vs卡斯帕羅夫的國際象棋對局示例,使用javascript較為逼真的模擬出了國際象棋對弈的場景,需要的朋友可以參考下2015-04-04
動態(tài)規(guī)劃之使用備忘錄來改進(jìn)Javascript函數(shù)
這篇文章主要介紹了動態(tài)規(guī)劃之使用備忘錄來改進(jìn)Javascript函數(shù),動態(tài)規(guī)劃它既是一種數(shù)學(xué)優(yōu)化方法,也是一種計算機(jī)編程方法,下文相關(guān)資料介紹需要的小伙伴可以參考一下2022-04-04
JavaScript Konami Code 實現(xiàn)代碼
JavaScript Konami Code 實現(xiàn)代碼2009-07-07

