1. 程式人生 > 程式設計 >JavaScript 滑鼠事件(MouseEvent)案例講解

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

滑鼠事件-MouseEvent

當滑鼠進行某http://www.cppcns.com種操作時,就會生成一個event物件,該物件記錄著滑鼠觸發事件時的所有屬性。

可以通過如下方法在google控制檯打印出 MouseEvent 物件。

function mouseDown(e){
var e = e||event;
console.log(e)
}
window.onloahttp://www.cppcns.comd = function (){ 
document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)
}

打印出來的 MouseEvent  如下:

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

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

下面列出一下常用的事件

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

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

offsetX、offsethttp://www.cppcns.comY :事件屬性返回觸發事件時 滑鼠相對於事件源元素 的X,Y座標,標準事件沒有對應的屬性。

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

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

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

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

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

到此這篇關於 滑鼠事件(MouseEvent)案例講解的文章就介紹到這了,更多相關Script 滑鼠事件(MouseEventfyoqb)內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!