如何阻止Keyup事件触发两次答案

【问题标题】：How to stop Keyup event from triggering twice如何阻止Keyup事件触发两次
【发布时间】：2019-01-09 19:23:59
【问题描述】：

Console.log 打印两次。我尝试过使用 e.stopPropagation()、e.preventDefault() 和 .stop()。这没用。 console.log 应该只触发一次

$('html').keyup(function (e) {
    if (e.keyCode == 46) {
        console.log("delete press");
        e.stopPropagation();
        e.preventDefault();
    }
});

【问题讨论】：

"console.log 只会触发一次" 那你怎么知道事件被触发了两次呢？此外，停止 HTML 元素上的事件传播没有任何作用，事件无论如何都不能从文档中冒出。
信息不足。发布的代码不能像您描述的那样运行。
你能试试.unbind然后.bind。可能是该事件被绑定了两次？

标签： javascript jquery

【解决方案1】：

不久前我遇到了类似的问题。我最终使用了$.unbind() 和$.bind()。我会首先调用$.unbind() 来删除任何可能已经绑定到事件的事件回调函数。然后，我会在事件中调用$.bind()，以便它可以做我想做的事情。

$('html').unbind('keyup');
$('html').bind('keyup', function (e) {

【讨论】：

【解决方案2】：

您可能需要对事件进行去抖动。

您可以使用lodash 之类的方法轻松完成此操作，或者如果您想了解它的工作原理，您也可以自己动手。

function handler(e) {
    if (e.keyCode == 46) {
        console.log("delete press");
        e.stopPropagation();
        e.preventDefault();
    }
}
$('html').keyup(lodash.debounce(handler, 250));

这里的 250 是消除事件抖动的毫秒数，还要注意事件是如何包装的。

所有选项的文档都可以在这里找到：https://lodash.com/docs/4.17.11#debounce

【讨论】：

OP 提供的代码不会触发两次，还缺少其他东西。
这里的问题是，这个问题不代表任何可重现的问题，请不要在答案中猜测。
@Teemu 硬件触发的事件被触发两次需要去抖动不是推测，这是一个常见问题。
@Durga 如果你读到他说控制台日志触发两次的问题，他的英语需要一点帮助，最后一行他的意思是他希望它只触发一次。
那么实际的硬件问题很可能是键盘上的手指很重，或者键盘脏了（keyup 事件不重复），这些都是您无法以编程方式解决的问题使固定。不过，你可能对最后一句话的翻译是正确的。

【解决方案3】：

使用off() 分离事件也可以

 $('html').off('keyup').on('keyup',function (e) {
  if (e.keyCode == 46) {
    console.log("delete press");
    e.stopPropagation();
    e.preventDefault();
  }
});

或

使用one() as 只执行一次事件处理程序

$('html').one('keyup',function (e) {
if (e.keyCode == 46) {
    console.log("delete press");
    e.stopPropagation();
    e.preventDefault();
}

});

【讨论】：