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

相关推荐
解道Jdon24 分钟前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
hzzzzzo037 分钟前
微服务网关全解析:从入门到实践
java·开发语言·微服务
纪莫42 分钟前
技术面:Spring (bean的生命周期、创建方式、注入方式、作用域)
java·spring·java面试⑧股
We....1 小时前
Java多线程分块下载文件
java·开发语言
不秃的开发媛1 小时前
Java连接池详解:从Oracle到TiDB的随缘之旅
java·oracle·tidb
慢半拍iii1 小时前
JAVA Web —— A / 网页开发基础
前端
Pluchon1 小时前
硅基计划3.0 Map类&Set类
java·开发语言·数据结构·算法·哈希算法·散列表
gnip1 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty1 小时前
基于hiprint的票据定位打印系统开发实践
javascript
Angelyb2 小时前
微服务保护和分布式事务
java·微服务·架构