基于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

相关推荐
coding随想3 分钟前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷4 分钟前
TypeScript-webpack
javascript·webpack·typescript
一个混子程序员5 分钟前
SpringBoot自定义Schedule注解
java
Rockson8 分钟前
使用Ruby接入实时行情API教程
javascript·python
心之语歌9 分钟前
Java高效压缩技巧:ZipOutputStream详解
java·后端
booooooty13 分钟前
基于Spring AI Alibaba的多智能体RAG应用
java·人工智能·spring·多智能体·rag·spring ai·ai alibaba
猴哥源码13 分钟前
基于Java+SpringBoot的健身房管理系统
java·spring boot
极光雨雨18 分钟前
Spring Bean 控制销毁顺序的方法总结
java·spring
祝余呀20 分钟前
HTML初学者第三天
前端·html
猴哥源码22 分钟前
基于Java+SpringBoot的三国之家网站
java·spring boot