Javascript Keydown 事件被触发两次答案

【问题标题】：Javascript Keydown event is triggered twiceJavascript Keydown 事件被触发两次
【发布时间】：2018-09-06 18:44:16
【问题描述】：

我正在处理文档上的 keydown 事件，以便在按下 ctrl + z 时可以undo。

这就是我将它与我的文档绑定的方式：

componentWillMount() {
  window.addEventListener('keydown', throttle(this.handleKeyDown, 300));
}

handleKeyDown(e) {
  if (e.ctrlKey && e.which === KEY_Z) {
    console.log('Undo');
  }
}

但是每当按键被按下时，事件就会触发两次，这意味着它一次撤消两个状态。如您所见，我也尝试使用lodash 限制事件，但没有效果。

【问题讨论】：

你的标题是keydown，但你正在收听keyup。
为什么要限制关键事件？那么，这两个回调调用是否使用相同的事件触发？因为如果您正在听 ctrl + Z，那么您将拥有 ctrl 和 Z 之一。
我的错我在最后一分钟更改了它以进行测试。这是我要更新的keydown。
@Kaiido 是的，在上述情况下按下时我会得到两个控制台日志。
如果你在componentWillMount中添加一个console.log('adding handler')，你会看到什么？如果只记录一次，请尝试throttle(()=>{console.log("throttle")}, 300)()。

标签： javascript reactjs

【解决方案1】：

您不会得到一个按键组合事件，而是每按下一个键都会触发一个事件。在按下 z 键之前，ctrl 键会自行触发事件。

【讨论】：

这种行为有什么解决办法吗？
一种方法是使用 keyDown 和 keyUp 事件处理程序记住 Ctrl、Alt、Shift 等键的状态。即在 keyDown 事件上将 ctrKeyPressed 设置为 true（当 e.ctrlKey 为 true 时）并在 keyUp 事件上将其设置回 false（再次当 e.ctrlKey 为 true 时）。然后在 z 键的事件处理期间结合该状态信息.