美文网首页
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 简单封装一个监听快捷键的对象

    使用:

  • 认识jQuery

    1.什么是jQueryjQuery本质就是一个用js封装的库,里面封装了很多方法和对象让网页开发更简单jQuery...

  • vue 遇到的坑

    一、watch监听数据 1、监听普通的变量 1、vue.js里面直接用watch监听对象变量,如果对象变量的属性发...

  • react --- 数据监听、axios请求封装

    一、数据监听 控制台输出: 二、axios请求封装新建server.js index.js 使用

  • 原生 js 封装 ajax的两种方式(get,post)

    创建一个ajax.js文件 封装ajax: /*ajax封装 @param option:传入一个对象 属...

  • 关于console的一点事儿

    print.js 对浏览器内部window上自带的console对象的一个极其简单的封装。 背景 前几天,我们后端...

  • Web笔记-Listener

    事件源、事件、监听器 事件源:发生事件的对象 事件:事件封装了事件源,方便监听器的某个方法获取到事件源对象 监听器...

  • 第029篇:Vue

    1、什么Vue   用js封装的框架,主要让数据渲染更加简单  Vue主要是通过一个Vue对象和网页内容进行关联,...

  • 事件

    js里有许多事件下面简单介绍一下 绑定事件 事件对象event 事件对象扩展 事件冒泡 监听器 事件冒泡的阻止 默...

  • 实现一个简单的jQuery

    jQuery说到底是一个函数对象,一个通过原生js实现了某些功能的函数,被封装成了一个js对象。jQuery对象是...

网友评论

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

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