js獲取鼠標(biāo)點(diǎn)擊的位置實(shí)現(xiàn)思路及代碼

2019-11-20 20:42:35

字體：大中小

供稿：網(wǎng)友

copy來的，但是原頁面的代碼還是需要修改，下面是修改可用的

常用的是 event.clientX和event.clientY分別獲取橫向的和縱向的位置，但僅使用這個(gè)方法是不夠的，因?yàn)閑vent.clientX和event.clientY獲取的鼠標(biāo)位置是相對(duì)于當(dāng)前屏幕的，而不考慮頁面的滾動(dòng)條所滾動(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)); 
} 

兩個(gè)方法分別獲得相對(duì)整個(gè)頁面(而不是屏幕)的鼠標(biāo)位置

event.pageX是在FF中所支持的，這樣就實(shí)現(xiàn)了跨瀏覽器操作

只需在其他方法中調(diào)用這兩個(gè)函數(shù)就可

復(fù)制代碼代碼如下:

 
function getPointPosition(event) 
{ 
var x_px_scr = event.clientX; 
var y_px_scr = event.clientY; 
alert("相對(duì)于當(dāng)前屏幕的X軸偏移量" + x_px_scr);<span style="font-family: tahoma, helvetica, arial;">//相對(duì)于設(shè)備(PC或移動(dòng)設(shè)備)</span> 
alert("相對(duì)于當(dāng)前屏幕的Y軸偏移量" + y_px_scr);//相對(duì)于設(shè)備(PC或移動(dòng)設(shè)備) 
var x_Px_page = pointerX(event); 
var y_Px_page = pointerY(event); 
alert("相對(duì)于整個(gè)頁面的X軸偏移量" + x_Px_page); //相對(duì)于瀏覽器 
alert("相對(duì)于整個(gè)頁面的Y軸偏移量" + y_Px_page); //相對(duì)于瀏覽器 
} 