基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以F1键为例)

核心代码

html 复制代码
<template></template>
<script>
export default {
  created() {
    //监听长按快捷键
    addEventListener("keydown", this.keydown);
    addEventListener("keyup", this.keyup);
  },
  destroyed(d) {
    //移除长按快捷键
    removeEventListener("keydown", this.keydown);
    removeEventListener("keyup", this.keyup);
  },
  methods: {
    keydown(e) {
      if (e.key === this.$global.version.key) {
        if (!this.$global.version.timeout) {
          this.$global.version.pressedStartCallback(e);
          this.$global.version.timeout = setTimeout(() => {
            this.$global.version.pressedEndCallback(e);
            this.keyup(e);
          }, 1000 * this.$global.version.delaySecond);
        }
        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    },
    keyup(e) {
      clearTimeout(this.$global.version.timeout), (this.$global.version.timeout = null);
      this.$global.version.pressedUpCallback(e);
    },
  },
};
</script>

配置文件

javascript 复制代码
export default {

    version: {
        time: "2024年2月6日 17:30:03", //版本时间(长按Pause Break五秒显示)
        key: "F1", //触发快捷键
        pressedEndCallback(d) {
            alert(`【更新时间】${this.time}\n(注意校对是否已发布最新代码)`);
        }, //长按结束触发方法
        pressedStartCallback(d) { }, //按下触发方法
        pressedUpCallback(d) { }, //弹起触发方法
        delaySecond: 3, //长按多少秒触发
        timeout: null,
    },

}

关联F1五连击

基于Vue2用keydown、setTimeout事件实现连续按键(连击)任意键(或组合键)3秒触发自定义事件(以F1键为例)-CSDN博客【代码】基于Vue2用keydown、setTimeout事件实现连续按键(连击)任意键(或组合键)3秒触发自定义事件(以F1键为例)https://blog.csdn.net/qq_37860634/article/details/136048467

相关推荐
猴哥源码1 分钟前
基于Java+SpringBoot的农事管理系统
java·spring boot
全宝14 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
面朝大海,春不暖,花不开16 分钟前
Java网络编程:TCP/UDP套接字通信详解
java·网络·tcp/ip
yanlele38 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮44 分钟前
【无标题】
开发语言·前端·javascript
慕y2741 小时前
Java学习第十五部分——MyBatis
java·学习·mybatis
fie88891 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
A__tao1 小时前
SQL 转 Java 实体类工具
java·数据库·sql
谦行1 小时前
深度神经网络训练过程与常见概念
前端
喝可乐的布偶猫1 小时前
Java类变量(静态变量)
java·开发语言·jvm