如何在javascript中捕获双键按下？答案

【问题标题】：How to trap double key press in javascript?如何在javascript中捕获双键按下？
【发布时间】：2009-08-03 18:06:08
【问题描述】：

我希望能够捕获双键按下（例如对于 Char T）以进行一些特殊处理。我希望按键发生的速度足够快，不会被解释为两次单独的按下，就像双击一样。有什么想法可以实现吗？

【问题讨论】：

【解决方案1】：

当按键被按下时，记下时间。然后将其与您记录的上一次按键被击中的时间进行比较。

如果差异在您的阈值之内，请将其视为双倍。否则，不要。粗略的例子：

var delta = 500;
var lastKeypressTime = 0;
function KeyHandler(event)
{
   if ( String.fromCharCode(event.charCode).toUpperCase()) == 'T' )
   {
      var thisKeypressTime = new Date();
      if ( thisKeypressTime - lastKeypressTime <= delta )
      {
        doDoubleKeypress();
        // optional - if we'd rather not detect a triple-press
        // as a second double-press, reset the timestamp
        thisKeypressTime = 0;
      }
      lastKeypressTime = thisKeypressTime;
   }
}

【讨论】：

此解决方案使用 Ctrl 键。他没有说他需要那个（尽管这对我来说很有意义）。
@乔什·斯托多拉：哈！显示我阅读的仔细...看到“Char T”，阅读“Ctrl T”...哎呀！

【解决方案2】：

有一个变量（可能是first_press），当按键事件发生时您将其设置为 true，并启动一个计时器，该计时器将在设定的时间后将变量重置为 false（无论您希望他们以多快的速度按下按键)。

在您的按键事件中，如果该变量为真，则您需要双击。

例子：

var first_press = false;
function key_press() {
    if(first_press) {
        // they have already clicked once, we have a double
        do_double_press();
        first_press = false;
    } else {
        // this is their first key press
        first_press = true;

        // if they don't click again in half a second, reset
        window.setTimeout(function() { first_press = false; }, 500);
    }
}

【讨论】：

您可以将“半秒”设置为用户可以更改的可配置持久值。可用性规则！
我并没有试图为他提供临时解决方案。只是向他展示了大致的想法。
不管怎样，你会同时遇到大量的超时，最终会让用户浏览器崩溃。 Shog 使用 Date 的答案肯定更好。
@Josh Stodola: 可以通过将计时器 ID 保存在某处并在开始新计时器之前停止它来避免这种情况。也就是说，它不仅仅是保持时间戳……我能想到的唯一用途是，如果你想为单按和双按执行两种不同的、相互排斥的操作：检查如果first_press 仍然为真，则计时器回调可以触发前者，如果为假，则可以触发后者。

【解决方案3】：

我知道回答为时已晚，但我是这样实现的：

let pressed;
let lastPressed;
let isDoublePress;

const handleDoublePresss = key => {
    console.log(key.key, 'pressed two times');
}

const timeOut = () => setTimeout(() => isDoublePress = false, 500);

const keyPress = key => {
    pressed = key.keyCode;

    if (isDoublePress && pressed === lastPressed) {
        isDoublePress = false;
        handleDoublePresss(key);
    } else {
        isDoublePress = true;
        timeOut();
    }

    lastPressed = pressed;
}

window.onkeyup = key => keyPress(key);

【讨论】：

欢迎来到stackoverflow。除了您提供的答案之外，请考虑提供一个简短说明，说明为什么以及如何解决此问题。