Question

我有以下代码。如果我按回车键，则会触发两次点击。如何避免多次触发事件？（将keyup keydown连接在一起）。注意：这种情况发生在Chrome中而不是IE中

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

Answer 1

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

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

Answer 2

删除其中一个事件：

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

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

Answer 3

这是我很快想出来的。这是你之后的事吗？

＆＃13;

$(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);

});

＆＃13;

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

＆＃13;

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

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

Answer 4

扩展此代码段，这在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>

Answer 5

创建var triggered = false;并添加

&& !triggered

到你的if条件，和

triggered = true;

对于您的功能，只要您的活动准备好再次触发，就会再次将其设为假

当同时使用时，避免在keyup，keydown上发生多个事件

5 个答案: