剑非出我心 2022-04-11 15:40 采纳率: 50%
浏览 329
已结题

vue如何监听键盘连击事件？

现在需求是这样的，需要设置快捷键，使用vue，我需要监听键盘连续敲击两下 q 键
（注意是连续。）

  • 写回答

12条回答 默认 最新

  • zh阿飞 2022-04-11 18:42
    关注
    获得3.30元问题酬金

    以下代码可以拷贝看效果，在vue中把js逻辑部分拷贝过去就可以了

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const CODE = 81 // q | Q 的code是81
      let preKeyCode = ""
      let preTime = ""
      document.addEventListener("keyup", function(event) {
        const key = event.keyCode
        let now = Date.now()
        // 上一次的和这次的一样
        // 如果不想要 q，其他键连续两次就可以，把 && event.keyCode === COD 去掉
        if (preKeyCode === event.keyCode && event.keyCode === CODE) {
          // 小于300ms算双击
          if (now - preTime < 300) {
            // 触发了
            console.log("双击", event.key)
          }
        }
        preTime = now
        preKeyCode = event.keyCode
      })
    </script>
  </body>
</html>
    评论

报告相同问题？

问题事件

  • 系统已结题 4月19日
  • 创建了问题 4月11日