美文网首页
js 简单封装一个监听快捷键的对象

js 简单封装一个监听快捷键的对象

作者: littlesunn | 来源:发表于2022-10-17 15:25 被阅读0次
    export default class Shortcuts {
    
        keyCodeMap = new Map([
            ["0", 48],
            ["1", 49],
            ["2", 50],
            ["3", 51],
            ["4", 52],
            ["5", 53],
            ["6", 54],
            ["7", 55],
            ["8", 56],
            ["9", 57],
            ["A", 65],
            ["B", 66],
            ["C", 67],
            ["D", 68],
            ["E", 69],
            ["F", 70],
            ["G", 71],
            ["H", 72],
            ["I", 73],
            ["J", 74],
            ["K", 75],
            ["L", 76],
            ["M", 77],
            ["N", 78],
            ["O", 79],
            ["P", 80],
            ["Q", 81],
            ["R", 82],
            ["S", 83],
            ["T", 84],
            ["U", 85],
            ["V", 86],
            ["W", 87],
            ["X", 88],
            ["Y", 89],
            ["UP", 38],
            ["RIGHT", 39],
            ["DOWN", 40],
            ["LEFT", 37],
            ["CTRL", 17],
            ["SHIFT", 16],
            ["ALT", 18],
            ["SPACE", 32],  // 空格键
    
        ]);
    
        constructor(keyNames = [], callback, isPreventDefault = false) {
            this.destroy();
            this.isPreventDefault = isPreventDefault;
            this.keyNames = keyNames;
            this.callback = callback;
            this.initEventListener()
        }
    
        initEventListener() {
            document.addEventListener("keyup", this.handleKeyup.bind(this))
        }
    
        destroy() {
            document.removeEventListener("keyup", this.handleKeyup.bind(this))
        }
    
        handleKeyup(e) {
            this.isPreventDefault && e.preventDefault();  // 是否阻止默认行为
            let conditions = []
    
            if (Array.isArray(this.keyNames)) {  // 数组是组合键
                this.keyNames.forEach(code => {
                    let strCode = code.toString().toUpperCase();
                    switch (strCode) {
                        case "CTRL":
                            conditions.push(e.ctrlKey)
                            break;
                        case "SHIFT":
                            conditions.push(e.shiftKey)
                            break;
                        case "ALT":
                            conditions.push(e.altKey)
                            break;
                        default:
                            conditions.push(this.keyCodeMap.get(strCode) == e.keyCode)
                            break;
                    }
                })
            }else {
                let strCode = this.keyNames.toString().toUpperCase();
                if(strCode == e.keyCode){
                    conditions.push(true); 
                }
            }
    
            if (conditions.every(item => item)) {
                this.callback && this.callback()
            }
        }
    }
    

    使用:

        new Shortcuts(["ctrl", "q"], ()=>{  //组合键
          console.log(111);
        });
        new Shortcuts("q", ()=>{  // 单键
          console.log(111);
        });
    

    相关文章

      网友评论

          本文标题:js 简单封装一个监听快捷键的对象

          本文链接:https://www.haomeiwen.com/subject/nswoortx.html