鼠標事件-MouseEvent


 

當鼠標進行某種操作時,就會生成一個event對象,該對象記錄着鼠標觸發事件時的所有屬性。

可以通過如下方法在google控制台打印出 MouseEvent 對象。

function mouseDown(e){
    var e = e||event;
    console.log(e)
}
window.onload = function (){
    document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)
}

打印出來的 MouseEvent  如下:

該對象屬性很多,但最常用的 不過 offsetX、offsetY、clientX/clientY、pageX、pageY。各個屬性對應的是什么呢? 

下面列出一下常用的事件

altkey : 觸發鼠標事件時是否alt 按鍵被按下,如果按下,則返回true,否則返回 fasle。

button:  事件屬性返回一個阿拉伯數字 , 0代表 按下 左鍵 ,1 代表按下 滾輪 ,2 代表按下 右鍵。

offsetX、offsetY :事件屬性返回觸發事件時 鼠標相對於事件源元素 的X,Y坐標,標准事件沒有對應的屬性。

clientX、clientY : 事件屬性返回當事件被觸發時鼠標指針相對於瀏覽器頁面(或客戶區)的水平坐標、垂直坐標。

pageX、pageY:事件屬性返回當事件被觸發時鼠標指針相對於整個頁面左上角的水平坐標、垂直坐標。

screenX、screenY:事件屬性返回當事件被觸發時鼠標位置相對於用戶屏幕水水平坐標、垂直坐標,此時的參照點也就是原點是屏幕的左上角。

好吧,文字敘述總歸是很煩,上個經典的圖,解釋一切 :

 

(完)

 

 

 


免責聲明!

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



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