单击链接时焦点输入中的键入事件

Question

我有一个按钮，单击后会显示一些输入字段。 输入字段将跟踪键入事件本身。

当我使用键盘单击按钮（将其聚焦然后按回车键）时，输入字段会收到意外的键入事件。

演示： http : //jsfiddle.net/LpXGM/3/ （只需按回车键，然后查看页面上的消息）

但是，如果我添加超时，一切都会按预期进行。 演示： http : //jsfiddle.net/8BRmK/1/ （点击返回按钮时没有键入事件）

为什么会发生这种奇怪的事情？ 我该如何解决？

带处理程序的代码

$button.on("click", function(){
    showModal();
});

$emailField.on("keyup", function(event) {
    // process the event
});

var showModal = function() {
    $modal.show();
    $emailField.focus();
}

Answer 1

没有超时的可能解决方案： http : //jsfiddle.net/agudulin/3axBA/

$button.on("keypress", function(event){
  if (event.keyCode == 13) {
    return false;
  }
});

$button.on("keyup", function(event){
  if (event.keyCode == 13) {
    showModal();
    $status.append($("<span>enter has been pressed</span></br>"));
  }
});

Answer 2

尝试$button.on("keyup mouseup", function(){

或$emailField.on("keypress", function(event) {

Answer 3

尝试

$(document).ready(function(){
    $(document).on("click",".btn",function(e){
       $status.append($("<span>btn click</span></br>"));
    });
    $(document).on("keyup",".email",function(e){
        $status.append($("<span>keyup " + event.keyCode + "</span></br>"));
    });
  });

Answer 4

是的，它的发生是因为您单击键盘而不是按钮单击事件首先触发，并且根据您的逻辑，您的输入字段将成为焦点，而您的键盘输入事件才被触发。 但是当您指定超时时，首先触发click事件，但是由于超时，您的逻辑延迟了，而不是您的keyup事件完成了我们的工作，所以重点不在您的输入中，为什么它不在输入中输入任何单词。