如何检测单个控制键盘事件而不是键组合？

Question

用它来检测control关键事件很容易

document.addEventListener('keyup', handler, false);

...

function handler(e) {
    var key = e.which || e.keyCode;

    if (key == 17) { // Control key
        ...
    }
}

问题是任何键组合，如control-c和control-v也会触发事件，似乎事件处理程序无法区分单个control和control中的control-c。

我想要的是只允许一键按下并释放，而不是按键组合来触发事件。

Answer 1

您实际上可以使用e.ctrlKey和e.altKey，根据这些键是否被按下，该值将为true或false。

在您的活动中，它将是这样的：

if (e.ctrlKey || e.altKey) {
    return;
}

编辑

作为参考，您可以查看https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey。

此属性实际上是一个布尔值，它返回触发事件时是否按下了ctrl键。

然后，您可以看到，如果用户决定按下ctrl键而没有其他键，则此方法将不会返回，并且e.ctrlKey将为false，因为在触发keyUp事件时，用户已经释放了该键。

Answer 2

这个怎么样：

var controlConsidered = false;

function ctrlPressed() {
  console.log("Control was pressed.");
}

function keydownhandler(e) {
  var key = e.which || e.keyCode;
  controlConsidered = (key == 17);
}

function keyuphandler(e) {
  var key = e.which || e.keyCode;
  if (key == 17 && controlConsidered) {
    ctrlPressed();
  }
}

document.addEventListener('keydown', keydownhandler, false);
document.addEventListener('keyup', keyuphandler, false);

Answer 3

这并不是完全被问到的，但是对于好奇的，下面的代码可以处理单个控制键按下和双控制键按下。它的工作原理如下：

1. 完全按照Josiah's answer中的描述检测有效的单一控制键事件。如果检测到，则发射ctrlPressed，其中：
2. 跟踪按下控制键的前两个时间戳，
3. 每次触发时，初始化特定threshold值（以毫秒为单位）的超时，并且，
4. 如果存在控件双击（时间戳差异在阈值内），则先前的超时被取消，否则不被取消。

var lastControlTime = 0,
  newControlTime, timeout,
  threshold = 200;

function ctrlPressed() {
  newControlTime = new Date();

  var bool = newControlTime - lastControlTime <= threshold;

  if (!bool)
    timeout = setTimeout(function() {
      if (timeout) {
        alert("Single control key pressed");
        timeout = undefined;
      }
    }, threshold);

  if (bool) {
    alert("Double control key pressed");
    clearTimeout(timeout);
    timeout = undefined;
  }

  lastControlTime = newControlTime;
}

function keydownhandler(e) {
  var key = e.which || e.keyCode;
  controlConsidered = (key == 17);
}

function keyuphandler(e) {
  var key = e.which || e.keyCode;
  if (key == 17 && controlConsidered) {
    ctrlPressed();
  }
}

document.addEventListener('keydown', keydownhandler, false);
document.addEventListener('keyup', keyuphandler, false);