现在需求是这样的，需要设置快捷键，使用vue，我需要监听键盘连续敲击两下 q 键
（注意是连续。）
以下代码可以拷贝看效果，在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>
<a v-on:dblclick="doubleclick">双击a标签</a>
定时器，记录次数，在一定时间内，多次触发就执行，否则清空次数
var fn = function(num, callback) {
var count = 0, timer = null, keyCode = null;
document.body.addEventListener("keyup", function(e) {
count ++;
if (keyCode && keyCode != e.keyCode) {
count = 1;
}
keyCode = e.keyCode;
clearTimeout(timer);
if (count >= num) {
count = 0;
keyCode = null;
timer = null;
callback && callback(e);
} else {
timer = setTimeout(function() {
count = 0;
clearTimeout(timer);
}, 1000);
}
});
}
fn(2, e => console.log(e));
let times = 0
document.onkeydown = (e) => {
if (81 == e.keyCode) {
console.log('点击了')
times++;
if(times >= 2){
times = 0
alert('触发了连续点击')
}
setTimeout(() => {
times = 0;
}, 300);
}
}
//1S内按键两次执行快捷方式
let first = null
(e) => {
if (e.keyCode == 81) {
// 首次按键， 提示 再按一次退出应用
if (!first) {
first = new Date().getTime();//记录第一次按下回退键的时间
setTimeout(function () {
//1s 后清除
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
//如果两次按下的时间小于1s执行
}
}
}
}
安装
npm i vue-click-helper -D
基本用法
<input @keyup.p="clickHelper">
<template>
<div v-click-helper="clickHelper">click me</div>
</template>
import Vue from 'vue'
import vueClickHelper from 'vue-click-helper'
export default{
directives: {
'click-helper': vueClickHelper
},
methods:{
clickHelper(e,isDoubleClick){
if (isDoubleClick){
// 双击事件...
}else{
// 单击..
}
}
}
}
那这不是双击事件？
不存在【连续】的概念，是你对第二次按下间隔时间多少的定义
你计算两个按键之间的时间就可以了
https://www.jb51.net/article/191840.htm
这个300ms是个临界值，双击间隔会大于这个时间，否则会识别成触摸事件或者单机事件
用一个变量记录上一次击键，并计算2次时间间隔