您好,登錄后才能下訂單哦!
這篇“javascript中鼠標(biāo)按鈕事件判斷怎么實(shí)現(xiàn)”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“javascript中鼠標(biāo)按鈕事件判斷怎么實(shí)現(xiàn)”文章吧。
只有在主鼠標(biāo)按鈕被單擊(或鍵盤回車鍵被按下)時(shí)才會(huì)觸發(fā) click 事件,因此檢測按鈕的信息 并不是必要的。但對(duì)于 mousedown 和 mouseup 事件來說,則在其 event 對(duì)象存在一個(gè) button 屬性, 表示按下或釋放的按鈕。DOM的 button 屬性可能有如下 3個(gè)值:0 表示主鼠標(biāo)按鈕,1 表示中間的鼠 標(biāo)按鈕(鼠標(biāo)滾輪按鈕) ,2 表示次鼠標(biāo)按鈕。在常規(guī)的設(shè)置中,主鼠標(biāo)按鈕就是鼠標(biāo)左鍵,而次鼠標(biāo) 按鈕就是鼠標(biāo)右鍵。
IE8及之前版本也提供了 button 屬性,但這個(gè)屬性的值與 DOM的 button 屬性有很大差異。
0:表示沒有按下按鈕。
1:表示按下了主鼠標(biāo)按鈕。
2:表示按下了次鼠標(biāo)按鈕。
3:表示同時(shí)按下了主、次鼠標(biāo)按鈕。
4:表示按下了中間的鼠標(biāo)按鈕。
5:表示同時(shí)按下了主鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕。
6:表示同時(shí)按下了次鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕。
7:表示同時(shí)按下了三個(gè)鼠標(biāo)按鈕。
不難想見,DOM模型下的 button 屬性比 IE模型下的 button 屬性更簡單也更為實(shí)用,之所以是這樣,原因是同時(shí)按下多個(gè)鼠標(biāo)按鈕的情形十分罕見。常見的做法就是將 IE模型規(guī)范化為 DOM方式,畢竟除 IE8及更 早版本之外的其他瀏覽器都原生支持 DOM模型。而對(duì)主、中、次按鈕的映射并不困難,只要將 IE的其 他選項(xiàng)分別轉(zhuǎn)換成如同按下這三個(gè)按鍵中的一個(gè)即可(同時(shí)將主按鈕作為優(yōu)先選取的對(duì)象)。換句話說, IE中返回的 5 和 7 會(huì)被轉(zhuǎn)換成 DOM模型中的 0。
由于單獨(dú)使用能力檢測無法確定差異(兩種模型有同名的 button 屬性),因此必須另辟蹊徑。我 們知道,支持 DOM 版鼠標(biāo)事件的瀏覽器可以通過 hasFearture()方法來檢測,所以可以再為 EventUtil 對(duì)象添加如下 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"這個(gè)特性,就可以確定 event 對(duì)象中存在的 button 屬性中是否包含正 確的值。如果測試失敗,說明是 IE,就必須對(duì)相應(yīng)的值進(jìn)行規(guī)范化。以下是使用該方法的示例。
<script type="text/javascript">
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mousedown", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getButton(event));
});
</script>
在這個(gè)例子中,我們?yōu)橐粋€(gè)<div>元素添加了一個(gè) onmousedown 事件處理程序。當(dāng)在這個(gè)元素上 按下鼠標(biāo)按鈕時(shí),會(huì)有警告框顯示按鈕的代碼。
在使用 onmouseup 事件處理程序時(shí),button 的值表示釋放的是哪個(gè)按鈕。此 外,如果不是按下或釋放了主鼠標(biāo)按鈕,Opera 不會(huì)觸發(fā) mouseup 或 mousedown 事件。
以上就是關(guān)于“javascript中鼠標(biāo)按鈕事件判斷怎么實(shí)現(xiàn)”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。