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

Question

用

很容易检测控制键事件

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，根据是否按下这些键，值将是真或假。

在你的活动中，它会是这样的：

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

编辑

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

这个属性实际上是一个布尔值，它 return 表示事件触发时是否按下了 ctrl 键。

然后，您可以看到，如果用户决定按下 ctrl 键而不是其他键，则此方法不会 return 并且 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

这并没有被确切地问到，但出于好奇，下面的代码可以处理单控制键按下和双控制键按下。它的工作原理如下：

完全按照中的描述检测到有效的单个控制键事件。如果检测到，则触发 ctrlPressed，其中：
跟踪按下控制键的前两个时间戳，
每次触发时都会为特定的 threshold 值（以毫秒为单位）初始化超时，并且，
如果有控件双击（时间戳差值在阈值以内），则取消之前的超时，否则不取消。

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);

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

How to detect single control keyup event but not key combinations?

javascript

events

google-chrome

google-chrome-extension

dom-events