JavaScript 鼠標事件(MouseEvent)案例講解

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

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

到此這篇關於JavaScript 鼠標事件(MouseEvent)案例講解的文章就介紹到這瞭,更多相關JavaScript 鼠標事件(MouseEvent)內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: