javascript - 区分按键和按住键

Question

我有一个 javascript 函数，它在按下“向下”键时运行。我想，如果按住“向下”键，该功能根本不会运行。

我考虑过 keydown 和 keyup 之间的时间，如果时间小于 1 秒，那么该功能将在 keyup 上运行。问题是，如果我按住键，浏览器会将其视为连续多次按下的键。

有一个更好的方法吗？

谢谢

Answer 1

有一个名为repeat的键盘事件属性，如果按键被按住，则返回 true。

document.addEventListener('keydown', (event) => {
  if(event.repeat) {
    // key is being held down
  } else {
    // key is being pressed
  }
});

Answer 2

我刚刚编写了这个小脚本，用于区分按下键和按下键 200 毫秒。也许你可以利用它：

document.onkeydown = function(e){
    var keycode = window.event ? window.event.keyCode : e.which;
    if(keycode == 40){
        var timer = setTimeout(function(){
            alert('Down key held');
            document.onkeyup = function(){};
        }, 200); 
        document.onkeyup = function(){
            clearTimeout(timer);
            alert('Down key pressed');   
        }
    }
};

JSFiddle

Answer 3

如果我理解您的问题是您的浏览器将一个键解释为多个 keydown 事件。如果按住某个键而不是按下它，您希望发生不同的事情；并且您希望这种差异基于您认为应该构成“持有”密钥的某个时间。因此，您需要通过跟踪 keyup 事件来区分按住和按下。下面的伪代码将解决这个问题：

按键时：

if !yourBool 
    start timer

yourBool = true 

在 Keyup 上：

if timer < yourTime
    do something

yourBool = false

这将起作用，因为除非发生 keyup 事件，否则计时器不会重新启动。

现在...如果您的浏览器将键保持解释为：
Keydown、Keyup、Keydown、Keyup.......
那么您对这种方法有疑问。

Answer 4

也许你可以在 keydown 上触发一个计数器，然后监听下一个 keyup。只要计数器超过 5 秒，或者您认为有多少时间，您就可以启动该功能。有道理？

Answer 5

连续的 keydown 不会触发 keyup，因此可以区分它们。

http://jsfiddle.net/pimvdb/xMFGQ/

$('body').keydown(function() {
    if(!$(this).data('timeDown')) { // if not pressed yet, save time
        $(this).data('timeDown', +new Date);
    }
}).keyup(function() {
    var diff = new Date - $(this).data('timeDown'); // time difference
    if(diff < 1000) { // less than one second
        alert(123);
    }
    $(this).data('timeDown', null); // reset time
});

Answer 6

浏览器看到该键被多次按下，但该keydown事件仅在第一次按下时发生。

您想要的是从keydown事件中计时，而不是keypressed.

Answer 7

我有一个类似的问题。我想捕获所有“第一个”keydown 事件，但如果它们是按下键的结果，则忽略连续事件。不确定这是否是您想要的，但这是一种方法：

var repeat = false;
el.addEventListener("keyup", function() { repeat = false; });
el.addEventListener("keydown", function() {
  if (!repeat) {
    // Run your code.
    repeat = true;
  }
});