javascript 組合按鍵事件監(jiān)聽(tīng)實(shí)現(xiàn)代碼
javascript 組合按鍵事件監(jiān)聽(tīng)實(shí)現(xiàn)代碼
JS組合按鍵事件監(jiān)聽(tīng),支持同時(shí)監(jiān)聽(tīng)多組按鍵如{a,b,c,}{ctrl,c}。
實(shí)例代碼:
<script type="text/javascript"> (function(){ /** *dqKeys v1.0.0 | (c) 2016 www.findme.wang *@params json keys 監(jiān)聽(tīng)的按鍵 *@params bool isOrder 按鍵是否有相應(yīng)的順序 *@params Function sucFuc 完成按鍵的回調(diào)函數(shù) *@params Function cancelFuc 完成按鍵取消后的回調(diào)函數(shù) *@author lidequan */ var dqKeys = function(keys,isOrder,sucFuc,cancelFuc) { // 函數(shù)體 return new dqKeys.fn.init(keys,isOrder,sucFuc,cancelFuc); } dqKeys.fn = dqKeys.prototype = { 'version':'1.0.0', //版本號(hào) 'author':'lidequan', //作者 'rightKeys':{}, //監(jiān)聽(tīng)的按鍵{key:code},code為按鍵對(duì)應(yīng)的ascii碼 'curKeys':[], //當(dāng)前按下的鍵 'sucFuc':null, //完成按鍵的回調(diào)函數(shù) 'cancelFuc':null, //完成按鍵取消后的回調(diào)函數(shù) 'isFinsh':false, //判斷是否完成按鍵 'isOrder':false, //按鍵是否有相應(yīng)的順序 init:function(keys,isOrder,sucFuc,cancelFuc){ this.rightKeys=keys; this.sucFuc=sucFuc; this.cancelFuc=cancelFuc; this.isOrder=isOrder; return this; }, listenkeys:function(){//監(jiān)聽(tīng)用戶鍵盤(pán)操作 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){//判斷數(shù)組中是否包含某個(gè)元素 return (arr.indexOf(val) == -1) ? false:true; }, checkResult:function(json,arr){ //判斷用戶是否按下監(jiān)聽(tīng)的所有按鍵 for(var i in json){ if(arr.indexOf(json[i])==-1){ return false; } } return true; }, remove:function(arr,val) { //從數(shù)組中移除某個(gè)元素 var index = arr.indexOf(val); if (index > -1) { arr.splice(index, 1); } return arr; }, getNextKey:function(){ //獲取下一次按鍵對(duì)應(yīng)的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.測(cè)試 dqKeys({'a':65,'b':66},true,function(){ console.log('okey'); },function(){ console.log('cancel'); }).listenkeys(); //2.測(cè)試 var dqKeys=new $$({'c':67,'d':68},false,function(){ console.log('keys down '); },function(){ console.log('keys cancel'); }); dqKeys.listenkeys(); </script>
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- javascript如何刪除所有事件監(jiān)聽(tīng)器
- JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽(tīng)使用方法以及實(shí)例效果演示
- 關(guān)于js中removeEventListener取消事件監(jiān)聽(tīng)的坑
- vue.js綁定事件監(jiān)聽(tīng)器示例【基于v-on事件綁定】
- vue.js過(guò)濾器+ajax實(shí)現(xiàn)事件監(jiān)聽(tīng)及后臺(tái)php數(shù)據(jù)交互實(shí)例
- vuejs2.0實(shí)現(xiàn)分頁(yè)組件使用$emit進(jìn)行事件監(jiān)聽(tīng)數(shù)據(jù)傳遞的方法
- 一文詳解JavaScript的事件監(jiān)聽(tīng)(最新整理)
相關(guān)文章
javascript實(shí)現(xiàn)時(shí)間格式輸出FormatDate函數(shù)
這篇文章主要介紹了javascript實(shí)現(xiàn)時(shí)間格式輸出FormatDate函數(shù),可實(shí)現(xiàn)fmt標(biāo)簽一樣對(duì)日期時(shí)間型內(nèi)容格式輸入的功能,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01淺析JavaScript中的特殊數(shù)據(jù)類(lèi)型
在JavaScript中,有6大數(shù)據(jù)類(lèi)型,分別包括string,number,boolean,undefined,null 和 object。下面通過(guò)通過(guò)本文給大家介紹JavaScript中的特殊數(shù)據(jù)類(lèi)型,需要的朋友參考下吧2017-12-12分享一個(gè)自己寫(xiě)的table表格排序js插件(高效簡(jiǎn)潔)
在前不久做的一個(gè)web項(xiàng)目中,需要實(shí)現(xiàn)js表格排序的效果,當(dāng)時(shí)為了省事,就在網(wǎng)上找了幾個(gè)相關(guān)的js插件2011-10-10JS實(shí)現(xiàn)金額轉(zhuǎn)換(將輸入的阿拉伯?dāng)?shù)字)轉(zhuǎn)換成中文的實(shí)現(xiàn)代碼
這篇文章介紹了JS實(shí)現(xiàn)金額轉(zhuǎn)換(將輸入的阿拉伯?dāng)?shù)字)轉(zhuǎn)換成中文的實(shí)現(xiàn)代碼,有需要的朋友可以參考一下,希望對(duì)大家有用2013-09-09Javascript異步編程的4種方法讓你寫(xiě)出更出色的程序
本文總結(jié)了"異步模式"編程的4種方法,理解它們可以讓你寫(xiě)出結(jié)構(gòu)更合理、性能更出色、維護(hù)更方便的Javascript程序2013-01-01js面向?qū)ο髮?shí)現(xiàn)canvas制作彩虹球噴槍效果
這篇文章主要介紹了js面向?qū)ο髮?shí)現(xiàn)canvas制作彩虹球噴槍效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09利用JS對(duì)iframe父子(內(nèi)外)頁(yè)面進(jìn)行操作的方法教程
這篇文章主要給大家介紹了利用JS對(duì)iframe父子(內(nèi)外)頁(yè)面進(jìn)行操作的方法教程,其中包括了怎么對(duì)iframe進(jìn)行操作、在iframe里面控制iframe外面的js代碼以及在父框架對(duì)子iframe進(jìn)行操作等,需要的朋友可以參考借鑒。2017-06-0610個(gè)很少使用的JavaScript?Console方法分享
你一定聽(tīng)說(shuō)過(guò)?console.log()?,而且可能一直在使用它,在本文中,我們將探討一些最有用的控制臺(tái)方法,以及它們?cè)跀?shù)據(jù)可視化、調(diào)試等方面的用途,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09defer屬性導(dǎo)致引用JQuery的頁(yè)面報(bào)“瀏覽器無(wú)法打開(kāi)網(wǎng)站xxx,操作被中止”錯(cuò)誤的解決方法
defer屬性導(dǎo)致引用JQuery的頁(yè)面報(bào)“瀏覽器無(wú)法打開(kāi)網(wǎng)站xxx,操作被中止”錯(cuò)誤2010-04-04