@H_403_0@

javascript 组合按键事件监听实现代码

@H_403_0@JS组合按键事件监听，支持同时监听多组按键如{a,b,c,}{ctrl,c}。

@H_403_0@实例代码：

<div class="jb51code">
<pre class="brush:js;">
<script type="text/javascript">
(function(){
/*
dqKeys v1.0.0 | (c) 2016 www.findme.wang
@params json keys 监听的按键
@params bool isOrder 按键是否有相应的顺序
@params Function sucFuc 完成按键的回调函数
@params Function cancelFuc 完成按键取消后的回调函数
@author lidequan
/
var dqKeys = function(keys,isOrder,sucFuc,cancelFuc) {
// 函数体
return new dqKeys.fn.init(keys,cancelFuc);
}
dqKeys.fn = dqKeys.prototype = {
'version':'1.0.0',//版本号
'author':'lidequan',//作者
'rightKeys':{},//监听的按键{key:code},code为按键对应的ascii码
'curKeys':[],//当前按下的键
'sucFuc':null,//完成按键的回调函数
'cancelFuc':null,//完成按键取消后的回调函数
'isFinsh':false,//判断是否完成按键
'isOrder':false,//按键是否有相应的顺序
init:function(keys,cancelFuc){
this.rightKeys=keys;
this.sucFuc=sucFuc;
this.cancelFuc=cancelFuc;
this.isOrder=isOrder;

    return this; 
  },listenkeys:function(){//监听用户键盘操作         
    var _self=this; 
    _self.addListener('keydown',function(oEvent){ 
      var oEvent =oEvent || window.event; 
      if(!_self.arrayContain(_self.curKeys,oEvent.keyCode)){ 
        if(_self.isOrder && _self.getNextKey() == oEvent.keyCode){ 
          _self.curKeys.push(oEvent.keyCode); 
        }else if(!_self.isOrder){ 
          _self.curKeys.push(oEvent.keyCode); 
        } 
      } 
      if(_self.checkResult(_self.rightKeys,_self.curKeys)){ 
        if(_self.sucFuc && !_self.isFinsh){ 
          _self.sucFuc(); 
        } 
        _self.isFinsh=true; 
      } 
    }); 
    _self.addListener('keyup',function(oEvent){ 
      var oEvent =oEvent || window.event;          
      if(_self.checkResult(_self.rightKeys,_self.curKeys) && _self.isFinsh){    
        //完成按键,又取消的事件 
        if(_self.cancelFuc){ 
          _self.cancelFuc(); 
        } 
      } 

      _self.curKey=_self.remove(_self.curKeys,oEvent.keyCode); 
      _self.isFinsh=false; 
    }); 
  },arrayContain:function(arr,val){//判断数组中是否包含某个元素 
      return (arr.indexOf(val) == -1) ? false:true; 
  },checkResult:function(json,arr){ //判断用户是否按下监听的所有按键 
    for(var i in json){ 
       if(arr.indexOf(json[i])==-1){ 
         return false; 
       } 
     } 
    return true; 
  },remove:function(arr,val) { //从数组中移除某个元素       
    var index = arr.indexOf(val);  
    if (index > -1) {  
      arr.splice(index,1);  
    }  
    return arr; 
  },getNextKey:function(){ //<a href="https://www.f2er.com/tag/huoqu/" target="_blank" class="keywords">获取</a>下一次按键对应的ascii码 
    for(var i in this.rightKeys){ 
      if(this.curKeys.indexOf(this.rightKeys[i])==-1){ 
         return this.rightKeys[i]; 
       } 
    } 
    return null; 
  },addListener:function(ev,fn,bool){ //事件绑定 
    if (document.attachEvent) {  
      document.attachEvent('on' + ev,fn);  
    }else{   
      document.addEventListener(ev,bool);  
    }  
  } 

} 
dqKeys.fn.init.prototype = dqKeys.fn; 
window.dqKeys = window.$$= dqKeys; 

})();

//1.测试
dqKeys({'a':65,'b':66},true,function(){
console.log('okey');
},function(){
console.log('cancel');
}).listenkeys();

//2.测试
var dqKeys=new $$({'c':67,'d':68},false,function(){
console.log('keys down ');
},function(){
console.log('keys cancel');
});
dqKeys.listenkeys();