javascript 組合按鍵事件監(jiān)聽實(shí)現(xiàn)代碼
javascript 組合按鍵事件監(jiān)聽實(shí)現(xiàn)代碼
JS組合按鍵事件監(jiān)聽,支持同時(shí)監(jiān)聽多組按鍵如{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)聽的按鍵
*@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)聽的按鍵{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)聽用戶鍵盤操作
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)聽的所有按鍵
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)聽器
- JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽使用方法以及實(shí)例效果演示
- 關(guān)于js中removeEventListener取消事件監(jiān)聽的坑
- vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
- vue.js過濾器+ajax實(shí)現(xiàn)事件監(jiān)聽及后臺(tái)php數(shù)據(jù)交互實(shí)例
- vuejs2.0實(shí)現(xiàn)分頁組件使用$emit進(jìn)行事件監(jiān)聽數(shù)據(jù)傳遞的方法
- 一文詳解JavaScript的事件監(jiān)聽(最新整理)
相關(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
分享一個(gè)自己寫的table表格排序js插件(高效簡潔)
在前不久做的一個(gè)web項(xiàng)目中,需要實(shí)現(xiàn)js表格排序的效果,當(dāng)時(shí)為了省事,就在網(wǎng)上找了幾個(gè)相關(guān)的js插件2011-10-10
JS實(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-09
js面向?qū)ο髮?shí)現(xiàn)canvas制作彩虹球噴槍效果
這篇文章主要介紹了js面向?qū)ο髮?shí)現(xiàn)canvas制作彩虹球噴槍效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09
利用JS對(duì)iframe父子(內(nèi)外)頁面進(jìn)行操作的方法教程
這篇文章主要給大家介紹了利用JS對(duì)iframe父子(內(nèi)外)頁面進(jìn)行操作的方法教程,其中包括了怎么對(duì)iframe進(jìn)行操作、在iframe里面控制iframe外面的js代碼以及在父框架對(duì)子iframe進(jìn)行操作等,需要的朋友可以參考借鑒。2017-06-06
10個(gè)很少使用的JavaScript?Console方法分享
你一定聽說過?console.log()?,而且可能一直在使用它,在本文中,我們將探討一些最有用的控制臺(tái)方法,以及它們?cè)跀?shù)據(jù)可視化、調(diào)試等方面的用途,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09
defer屬性導(dǎo)致引用JQuery的頁面報(bào)“瀏覽器無法打開網(wǎng)站xxx,操作被中止”錯(cuò)誤的解決方法
defer屬性導(dǎo)致引用JQuery的頁面報(bào)“瀏覽器無法打開網(wǎng)站xxx,操作被中止”錯(cuò)誤2010-04-04

