javascript中鼠標按鈕事件判斷怎么實現

這篇“javascript中鼠標按鈕事件判斷怎么實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“javascript中鼠標按鈕事件判斷怎么實現”文章吧。

只有在主鼠標按鈕被單擊（或鍵盤回車鍵被按下）時才會觸發 click 事件，因此檢測按鈕的信息 并不是必要的。但對于 mousedown 和 mouseup 事件來說，則在其 event 對象存在一個 button 屬性， 表示按下或釋放的按鈕。DOM的 button 屬性可能有如下 3個值：0 表示主鼠標按鈕，1 表示中間的鼠 標按鈕（鼠標滾輪按鈕） ，2 表示次鼠標按鈕。在常規的設置中，主鼠標按鈕就是鼠標左鍵，而次鼠標 按鈕就是鼠標右鍵。
        IE8及之前版本也提供了 button 屬性，但這個屬性的值與 DOM的 button 屬性有很大差異。
       0：表示沒有按下按鈕。 
       1：表示按下了主鼠標按鈕。 
       2：表示按下了次鼠標按鈕。 
       3：表示同時按下了主、次鼠標按鈕。 
       4：表示按下了中間的鼠標按鈕。 
       5：表示同時按下了主鼠標按鈕和中間的鼠標按鈕。 
       6：表示同時按下了次鼠標按鈕和中間的鼠標按鈕。 
       7：表示同時按下了三個鼠標按鈕。 
       不難想見，DOM模型下的 button 屬性比 IE模型下的 button 屬性更簡單也更為實用，之所以是這樣，原因是同時按下多個鼠標按鈕的情形十分罕見。常見的做法就是將 IE模型規范化為 DOM方式，畢竟除 IE8及更 早版本之外的其他瀏覽器都原生支持 DOM模型。而對主、中、次按鈕的映射并不困難，只要將 IE的其 他選項分別轉換成如同按下這三個按鍵中的一個即可（同時將主按鈕作為優先選取的對象）。換句話說， IE中返回的 5 和 7 會被轉換成 DOM模型中的 0。 
       由于單獨使用能力檢測無法確定差異（兩種模型有同名的 button 屬性），因此必須另辟蹊徑。我 們知道，支持 DOM 版鼠標事件的瀏覽器可以通過 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，就必須對相應的值進行規范化。以下是使用該方法的示例。 

<script type="text/javascript">
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mousedown", function(event){
       event = EventUtil.getEvent(event);
       alert(EventUtil.getButton(event)); 
});
</script>
       在這個例子中，我們為一個<div>元素添加了一個 onmousedown 事件處理程序。當在這個元素上 按下鼠標按鈕時，會有警告框顯示按鈕的代碼。
       在使用 onmouseup 事件處理程序時，button 的值表示釋放的是哪個按鈕。此 外，如果不是按下或釋放了主鼠標按鈕，Opera 不會觸發 mouseup 或 mousedown 事件。 

以上就是關于“javascript中鼠標按鈕事件判斷怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。