只有在主鼠標(biāo)按鈕被單擊(或鍵盤回車鍵被按下)時才會觸發(fā) click 事件,因此檢測按鈕的信息 并不是必要的。但對于 mousedown 和 mouseup 事件來說,則在其 event 對象存在一個 button 屬性, 表示按下或釋放的按鈕。DOM的 button 屬性可能有如下 3個值:0 表示主鼠標(biāo)按鈕,1 表示中間的鼠 標(biāo)按鈕(鼠標(biāo)滾輪按鈕) ,2 表示次鼠標(biāo)按鈕。在常規(guī)的設(shè)置中,主鼠標(biāo)按鈕就是鼠標(biāo)左鍵,而次鼠標(biāo) 按鈕就是鼠標(biāo)右鍵。
? ? ? ? IE8及之前版本也提供了 button 屬性,但這個屬性的值與 DOM的 button 屬性有很大差異。
? ? ? ?0:表示沒有按下按鈕。?
? ? ? ?1:表示按下了主鼠標(biāo)按鈕。?
? ? ? ?2:表示按下了次鼠標(biāo)按鈕。?
? ? ? ?3:表示同時按下了主、次鼠標(biāo)按鈕。?
? ? ? ?4:表示按下了中間的鼠標(biāo)按鈕。?
? ? ? ?5:表示同時按下了主鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕。?
? ? ? ?6:表示同時按下了次鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕。?
? ? ? ?7:表示同時按下了三個鼠標(biāo)按鈕。?
? ? ? ?不難想見,DOM模型下的 button 屬性比 IE模型下的 button 屬性更簡單也更為實用,之所以是這樣,南昌網(wǎng)站制作公司百恒網(wǎng)絡(luò)前端開發(fā)工程師告訴大家原因是同時按下多個鼠標(biāo)按鈕的情形十分罕見。常見的做法就是將 IE模型規(guī)范化為 DOM方式,畢竟除 IE8及更 早版本之外的其他瀏覽器都原生支持 DOM模型。而對主、中、次按鈕的映射并不困難,只要將 IE的其 他選項分別轉(zhuǎn)換成如同按下這三個按鍵中的一個即可(同時將主按鈕作為優(yōu)先選取的對象)。換句話說, IE中返回的 5 和 7 會被轉(zhuǎn)換成 DOM模型中的 0。?
? ? ? ?由于單獨使用能力檢測無法確定差異(兩種模型有同名的 button 屬性),因此必須另辟蹊徑。我 們知道,支持 DOM 版鼠標(biāo)事件的瀏覽器可以通過 hasFearture()方法來檢測,所以可以再為 EventUtil 對象添加如下 getButton()方法。?
var EventUtil = {?
//省略了其他代碼?
getButton: function(event){
if (document.implementation.hasFeature("MouseEvents", "2.0")){
? ? ? ?return event.button;
} else {
? ? ? ?switch(event.button){
? ? ? ? ? ? ? case 0:
? ? ? ? ? ? ? case 1:
? ? ? ? ? ? ? case 3:
? ? ? ? ? ? ? case 5:
? ? ? ? ? ? ? case 7:
? ? ? ? ? ? ? ? ? ? ?return 0;
? ? ? ? ? ? ? case 2:
? ? ? ? ? ? ? case 6:
? ? ? ? ? ? ? ? ? ? ?return 2;
? ? ? ? ? ? ? case 4: return 1;
? ? ? ? ? ? ? }
? ? ? ?}
},
//省略了其他代碼?
};?
? ? ? ?通過檢測"MouseEvents"這個特性,就可以確定 event 對象中存在的 button 屬性中是否包含正 確的值。如果測試失敗,說明是 IE,就必須對相應(yīng)的值進行規(guī)范化。以下是使用該方法的示例。?
? ? ? ?在這個例子中,我們?yōu)橐粋€
? ? ? ?在使用 onmouseup 事件處理程序時,button 的值表示釋放的是哪個按鈕。此 外,如果不是按下或釋放了主鼠標(biāo)按鈕,Opera 不會觸發(fā) mouseup 或 mousedown 事件。?
? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://www.gimmickmag.com/如轉(zhuǎn)載請注明出處!