js简单封装监听快捷键对象示例及使用
作者: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封装监听快捷键对象的资料请关注脚本之家其它相关文章!