避免同时使用 keyup、keydown 上的多个事件答案

【问题标题】：Avoid multiple events on keyup, keydown when used simultaneously避免同时使用 keyup、keydown 上的多个事件
【发布时间】：2015-07-12 01:56:47
【问题描述】：

我有以下代码。如果我按回车键，它会触发两次点击。如何避免多次触发事件？（同时保持keyup keydown）。注意：这种情况发生在chrome而不是IE

$(document).on('keyup keydown','#txtbox', function (event) {  if(event.which == 13 )$('#btnEnter').click(); return false;}});

【问题讨论】：

为什么需要同时捕获这两个事件？
@Claudio Redi 我已经编写了文本框验证来限制输入最大长度。我的项目已经有了这个代码。我现在不能改变它。我需要从现有代码中找出一些方法。
如果不是上面发布的代码，您可以在哪里进行更改？
如果你被上面的代码卡住了，哪里改代码？

标签： javascript jquery

【解决方案1】：

我得到了最简单的解决方案。使用 event.type 属性。

if(event.which == 13 && event.type == 'keyup')
{ 
 // Do some stuff. You can use event.type = 'keydown' also 
}

【讨论】：

【解决方案2】：

删除其中一个事件：

$(document).on('keyup', function (event) { 
     if(event.which == 13 ) $('#btnEnter').click();
});

每次按键（现在，顺便说一句，这是另一个事件），都会触发 keydown 和 keyup 事件，不是吗？

【讨论】：

正如我已经提到的问题，我必须从现有代码中找出方法
$('#btnEnter').click(); 是做什么的？顺便说一句，你的意思是你不能编辑代码？你需要解释一下，为什么你必须保留这两个事件。
那么（我仍然不完全理解），如果您尝试 Aramil 的代码，它应该可以工作。你有吗？
不，它没有，因为你必须让trigger = false，到时候触发事件会再次触发

【解决方案3】：

扩展这个 sn-p，这在 AJAX 调用完成时起作用：

$(document).on('keyup keydown', function (event) {
    if(event.which === 13 ) {
        $('#btnEnter').click();
    }
});

$('#btnEnter').click(function() {
    if ( $(this).hasClass("keydown") ) {
        return;
    }
    $("div").append("I'm clicked on keydown only!<br/>");
    $(this).is(".keydown") || $(this).addClass("keydown");

    $.ajaxComplete(function() {
        $('#btnEnter').removeClass("keydown");
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnEnter">I'd be clicked on enter key down</button>
<div></div>

【讨论】：

【解决方案4】：

这是我很快想到的。这就是你所追求的吗？

$(document).on('keyup keydown', function (event) {
    if(event.which === 13 ) {
        $('#btnEnter').click();
    }
});

$('#btnEnter').click(function() {
    if ( $(this).hasClass("keydown") ) {
        return;
    }
    $("div").append("I'm clicked on keydown only!<br/>");
    $(this).is(".keydown") || $(this).addClass("keydown");

    setTimeout(function() {
        $('#btnEnter').removeClass("keydown");
    }, 150);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnEnter">I'd be clicked on enter key down</button>
<div></div>

编辑：为了支持我的评论，您可以执行以下操作。

$.ajax({
    method: "GET", // Or POST
    url: "yourURL"
    //other settings
}).done(function(data) {
    //Do your stuff
    //And then, do:
    $('#btnEnter').removeClass("keydown");
});

【讨论】：

所以，在你的 ajax 成功/完成函数中，执行$('#btnEnter').removeClass("keydown");。 setTimeout 不是必需的，因为您需要在 ajax 完成后立即启用 enter keydown。

【解决方案5】：

创建var triggered = false;并添加

&& !triggered

到你的 if 条件，并且

triggered = true;

到您的函数，并在您的事件准备好再次触发时再次将其设为 false

【讨论】：