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中鼠标按钮事件判断怎么实现”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。