时间戳

首页 > 解决方案 > 如何在 reactjs 应用程序中检测双班按键事件？

javascript - 如何在 reactjs 应用程序中检测双班按键事件？

问题描述

尽管遵循了这个stackoverflow 线程，但我无法在我的reactjs应用程序中有效地检测到双档按键事件。

我补充说，

componentDidMount() {
    document.addEventListener('keydown', this.handleKeyPress);
}

componentWillUnmount(){
    document.removeEventListener("keydown", this.handleKeyPress);
}

handleKeyPress = (event) => {
    how to detect double shift key press, more efficiently?
}

标签： javascriptreactjs

解决方案

因为在 React 中你在同一个元素上使用点击和双击事件有一些限制，我会像这样自己做：

创建 3 个变量：一个用于计数器（按班次的频率），一个用于按键之间的经过时间。注意到 Shift 被双击的状态变量

如果触发了 Key-Event（顺便说一句：我会使用 keyup），那么您：

  • 检查是否按下了 Shift 键（通过键码检查）
  • （如果是）将计数器变量增加到1
    • 并将elapsed-time变量设置为当前时间戳。

如果触发了额外的键事件，还要检查是否按下了 shift 键。如果yes，请检查current-timestamp减号elapsed-timestamp是否在您设置的注意双键按下的时间范围内（例如 1 秒）。如果是，请将您的double-press变量设置为 1，如果不是，请清除计数器和elapsed-time变量。

希望这能给你一个如何处理的想法。在我在第一行发布的页面上，还有一个类似这种想法的小例子：https ://stackoverflow.com/a/40449854/1256697

推荐阅读