您当前的位置:首页 > 网站建设笔记 >

鼠标按钮

0

只有在主鼠标按钮被单击(或键盘回车键被按下)时才会触发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版鼠标事件的浏览器可以通过hasFeature()方法来检测。

<script type="text/javascript">
(function(){
  function getButton(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;
      }
    }
  }
  var formatNode=document.querySelector(".format");
  if(formatNode.addEventListener){
    formatNode.addEventListener("mousedown",function(event){
      ADS.log.write(getButton(event));
    },false);
  }else if(formatNode.attachEvent){
    formatNode.attachEvent("onmousedown",function(event){
      ADS.log.write(getButton(event));
    });
  }
})();
</script>

通过检测MouseEvents这个特性,就可以确定event对象中存在的button属性中是否包含正确的值。如果测试失败,说明是IE,就必须对相应的值进行规范化。在使用onmouseup事件处理程序时,button的值表示释放的是哪个按钮。此外,如果不是按下或释放了主鼠标按钮,Opera不会触发mouseup或mousedown事件。

顶部中部底部