js简单封装监听快捷键对象示例及使用

 更新时间:2023年08月08日 14:43:06   作者:littlesunn  
这篇文章主要为大家介绍了js简单封装监听快捷键对象及使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

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

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简单封装监听快捷键对象示例及使用的详细内容,更多关于js封装监听快捷键对象的资料请关注脚本之家其它相关文章!

相关文章

  • 详解微信小程序如何实现类似ChatGPT的流式传输

    详解微信小程序如何实现类似ChatGPT的流式传输

    这篇文章主要为大家介绍了微信小程序如何实现类似ChatGPT的流式传输示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 用javascript制作qq注册动态页面

    用javascript制作qq注册动态页面

    这篇文章主要介绍了用javascript制作qq注册动态页面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-04-04
  • JS高级ES6的6种继承方式

    JS高级ES6的6种继承方式

    这篇文章主要和大家分享的事JS高级ES6的6种继承方式,继承是面向对象中老生常谈的一个内容,在ECMAScript6之前,JavaScript中的继承可谓是非常的繁琐的,有各种各样的继承,本质上所有的继承都是离不开原型链的,更多详细内容请感兴趣的小伙伴参考下面文章内容吧
    2021-12-12
  • JS分层架构低代码跨iframe拖拽示例详解

    JS分层架构低代码跨iframe拖拽示例详解

    这篇文章主要为大家介绍了JS分层架构低代码跨iframe拖拽示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Canvas如何判断点在形状内及内置API性能详解

    Canvas如何判断点在形状内及内置API性能详解

    这篇文章主要为大家介绍了Canvas如何判断点在形状内及内置API性能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JS轻量级函数式编程实现XDM二

    JS轻量级函数式编程实现XDM二

    这篇文章主要为大家介绍了JS函数式编程实现XDM示例详解第2/3篇,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 收集整理的四个方向的滚动

    收集整理的四个方向的滚动

    收集整理的四个方向的滚动...
    2006-06-06
  • 微信小程序 navigation API实例详解

    微信小程序 navigation API实例详解

    这篇文章主要介绍了微信小程序 navigation API实例详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • JavaScript 对象管家 Proxy

    JavaScript 对象管家 Proxy

    这篇文章主要为大家介绍了JavaScript对象管家Proxy使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 微信小程序 设置启动页面的两种方法

    微信小程序 设置启动页面的两种方法

    这篇文章主要介绍了 微信小程序 设置启动页面的方法的相关资料,这里对设置启动页面的两种方法分别介绍,需要的朋友可以参考下
    2017-03-03

最新评论