js 獲取鼠標位置


  最簡單的方法,供事件中獲取事件觸發時的鼠標位置的方法:

function xxx(e){ 
   e
= e || window.event; var movex=e.pageX; var movey=e.pageY;
  
}
//var movex=event.pageX;
//var movey=event.pageY;  
 

  簡單點的方法就是定義兩個全局變量接受鼠標的x和y坐標,讓后定義一個方法在獲取有效的事件對象后將鼠標坐標賦給定義好的全局變量,然后將這個方法賦給document.onmouseover事件:

var movex; var movey;                     //用來接受鼠標位置的全局變量
function mousemove(e)
{
       e=e  || window.event;
       if(e.pageX || e.pageY)
       {
                movex=e.pageX;
                movey=e.pageY 
       }             
}    

document.onmousemove=mousemove;

onmousemove 事件會在鼠標指針移動時發生。

onmousemove="SomeJavaScriptCode"
參數 描述
SomeJavaScriptCode 必需。規定該事件發生時執行的 JavaScript。
 獲取有效的時間對象
這句話的目的是照顧到瀏覽器的兼容性,不同的瀏覽器解釋js代碼的方式不同,這句話將觸發的事件對象賦予e這個變量,在ie中事件對象定義為window.event,
而在其他一些瀏覽器,該對象需要作為參數傳入(在W3C標准支持的瀏覽器下事件對向是引發事件涵數的第一個參數),即_e,傳入的時候傳event,見下面的代碼。 
e=e  || window.event;

你去掉這句話在ie下依然可以的原因是 event == window.event,所有對象都是window對象的屬性,所以加不加ie瀏覽器都能認出來。

可獲取的鼠標坐標有以下幾種:
  1.PageX/PageX:鼠標在頁面上的位置,從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化
2.clientX/clientY:鼠標在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化.
可是悲劇的是,PageX在ie下沒有(???)
3.screenX/screenY:鼠標在屏幕上的位置,從屏幕左上角開始(w3c標准
4.offsetX/offsetY:IE特有,鼠標相比較於觸發事件的元素的位置,以元素盒子模型的內容區域的左上角為參考點,如果有boder,可能出現負值
5.layerX/layerY:FF特有(???),鼠標相比較於當前坐標系的位置,即如果觸發元素沒有設置絕對定位相對定位,以頁面為參考點,如果有,將改變參考坐標系,從觸發元素盒子模型的border區域的 左上角為參考點也就是當觸發元素設置了相對或者絕對定位后,layerX和offsetX就幸福地生活在一起^-^,幾乎相等,唯一不同就是一個從border為參考點,一個以內容為參考點
chrome和safari一條龍通殺!完全支持所有屬性.其中(offsetX和layerX都是以border為參考點)

(ie11和edge應該不會這么悲劇吧!)
 

Event 對象

Event 對象代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM