javascript 组合按键事件监听实现代码
程序员文章站
2023-12-01 22:32:52
javascript 组合按键事件监听实现代码
js组合按键事件监听,支持同时监听多组按键如{a,b,c,}{ctrl,c}。
实例代码:
javascript 组合按键事件监听实现代码
js组合按键事件监听,支持同时监听多组按键如{a,b,c,}{ctrl,c}。
实例代码:
<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,isorder,sucfuc,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,isorder,sucfuc,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(){ //获取下一次按键对应的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,fn,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(); </script>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
推荐阅读
-
javascript 组合按键事件监听实现代码
-
javascript 组合按键事件监听实现代码
-
JavaScript监听键盘事件代码实现
-
JavaScript实现为事件句柄绑定监听函数的方法分析
-
JS监听组合按键思路及实现过程
-
JavaScript监听触摸事件代码实例
-
动态创建的表格单元格中的事件实现代码_javascript技巧
-
为非IE浏览器添加mouseenter,mouseleave事件的实现代码_javascript技巧
-
Javascript 键盘事件的组合使用实现代码_javascript技巧
-
为非IE浏览器添加mouseenter,mouseleave事件的实现代码_javascript技巧