超乎想象的快捷键魔法: 监听mousemove事件实现快捷键

偶然的一次机会，发现了一个好玩的东西，不用监听keydown系列的事件，也可以实现快捷键功能。

现在有一个场景，需要同时按住 shift + alt，将鼠标样式变成小手（cursor: 'pointer'）， 先看看 keydown 事件是如何实现的。

通过keydown事件

let originHotkey = []
let hotkeys = ['Shift', 'Alt'];
function isTracking() {
  return originHotkey.join() === hotkeys.join()
}
function handleKeydown (e) {
  if (hotkeys.includes(e.key)) {
    originHotkey.push(e.key);
  }
  if (isTracking()) {
    console.log('触发了快捷键');
    document.body.style.cursor = 'pointer'
  }
}
function handleKeyup(e) {
  if (hotkeys.includes(e.key)) {
    originHotkey = originHotkey.filter(hotkey => {
      return hotkey !== e.key
    })
  }
  if(!isTracking()) {
      document.body.style.cursor = 'auto'
  }
}
function handleClick () {
  if(isTracking()) {
    console.log("快捷键点击")
  }
}
window.addEventListener('keydown', handleKeydown);
window.addEventListener('keyup', handleKeyup);
window.addEventListener('click', handleClick);

大致思路就是维护一个 originHotkey 队列，每次键盘按下的时候，记录一下键盘的值，同时也检测一下，是否满足触发快捷键的要求。键盘松开的时候，删除队列里对应的值。

可以看到，每次我们按住 shift + alt 的时候，鼠标外观样式都会变成小手，松开快捷键时，又变回默认样式。

优缺点

优点很明显，可以捕获用户按下的所有键盘按键,包括字母、数字、功能键等，非常适合实现复杂组合的快捷键功能。

至于缺点的话，keydown 事件必须要在页面聚焦的时候，才会触发，如果当前焦点不在页面上，触发不了 keydown 事件。

举个🌰，打开控制台，切换到 console 的 tab，保证焦点在 console 上，如下

这个时候，我们再去触发快捷键，你会发现，压根就触发不了，无论你怎么按，鼠标也没有变成小手的状态，刷新一下页面，重复上述步骤，鼠标又可以正常变回小手样式了。

通过Event事件对象

在开始之前，先来看看 Event 对象上有哪些属性，写一个简单的🌰。

function handleMousemove(MouseEvent) {
  console.log('鼠标移动 MouseEvent: ', MouseEvent);
}
window.addEventListener('mousemove', handleMousemove);

仔细观察，可以看到，有一个 altKey 的属性，但是它的值是 false，让我们查一下mdn，看看这个值代表什么意思。

一目了然，似乎发现了另外一种实现快捷键的方法。还是基于上面那个场景，让我们用 mousemove 事件来实现一下。

let hotkey = ['shiftKey', 'altKey'];
function isTracking (e) {
  return hotkey.every(key => e[key]);
}
function handleMousemove(MouseEvent) {
  if(isTracking(MouseEvent)) {
    console.log('触发了快捷键')
    document.body.style.cursor = 'pointer'
  } else {
    document.body.style.cursor = 'auto'
  }
}
window.addEventListener('mousemove', handleMousemove);

你没看错，代码就是这么简单，而且再也不用担心页面有没有失焦了。

优缺点

优点很明显，代码简洁。

缺点的话，也很明显，MouseEvent 对象上，只支持四个键位，分别是shiftKey、altKey、metaKey、ctrlKey，不支持其他键盘，比如字母、数字、功能键等，自由度没有keydown事件高。

metaKey 在 MAC 键盘上，表示 Command 键（⌘），在 Windows 键盘上，表示 Windows 键（⊞）。

altKey 在 MAC 键盘上，表示 option 键（⌥），在 Windows 键盘上，表示 Windows 键（Alt）。

ctrlKey 在 MAC 键盘上，表示 control 键（^），在 Windows 键盘上，表示 Windows 键（Ctrl）。

总结

主要讲述了两种实现快捷键监听的方法：1.通过传统的keydown事件实现监听，自由度高，功能强大，但是页面失焦的时候，触发不了keydown事件；2.通过event对象的实例属性来实现监听，代码简洁，但是组合键有限，只支持四个键位shiftKey、altKey、metaKey、ctrlKey。大家可以根据不同场景，来选择合适的方案。