在处理focusout和keydown时，如何防止回车键触发focusout

Question

我在$(elementID).on()事件处理程序中处理两个事件，即focusout和keydown。

调用$(elementID).off("focusout keydown");作为.on()事件处理程序中的最后一行似乎部分正在工作-- focusout工作正常，但keydown发射了两次。

<小时 />编辑： 根据@Barmar的发现，keydown首先触发focusout，然后触发keydown。这种情况发生在Firefox 22中，但显然不是在Chrome 29中

<小时 />这是HTML:

<input type = "text" id = "textField" />
<input type = "button" onclick = "setFocus();" value = "click here" />
<ol>
      <li>Type some text into the textfield.</li>
      <li>Click the button.</li>
      <li>
            Click out of the textfield, or
            <br />
            <i>press enter for some weird behavior.</i>
      </li>
</ol>

…这是javascript/jQuery:

 function setFocus() {
       $("#textField").focus();
       $("#textField").select();
       var count = 1;
       $("#textField").on("focusout keydown", function(e) {
              // if clicked away, or the enter key is pressed:
              if (e.type == "focusout" || e.keyCode == 13) {
                     alert(e.type + ": " + count++);
              }
              // this doesn't seem to be working correctly:
              $("#textField").off("focusout keydown");
       });
 }

…这是jsFiddle。

Answer 1

根据我的推断，当你按下enterkeydown时，会触发keydown事件打开警报，然后由于enter默认功能而触发focusout，然后会触发focusout警报。因此，如果按下回车键，您需要解除绑定聚焦

    $("#textField").on("focusout keydown", function (e) {
        if (e.type == "focusout" || e.keyCode == 13) {
           if(e.keyCode == 13){
             $(this).unbind('focusout');
           }
        alert(e.type + ": " + count++);
        }
    $("#textField").off("focusout keydown");
    });

这是经过编辑的JsFiddle

Answer 2

您是否尝试使用one事件绑定而不是on？那么你就不必在最后解除绑定了。

  $("#textField").one("focusout keydown", function(e) {
          // if clicked away, or the enter key is pressed:
          if (e.type == "focusout" || e.keyCode == 13) {
                 alert(count++);
          }
   });

http://jsfiddle.net/yaFeF/12/

Answer 3

好的，这里有一个讨厌的黑客：

function setFocus() {
    $("#textField").focus();
    $("#textField").select();
    var count = 1;
    // when clicking away:
    $("#textField").on("focusout keydown", function(e) {
        var code = e.keyCode ? e.keyCode : e.which;
        // if the key is NOT the enter or tab keys, which also trigger focusout:
        if (code !== 13 && code !== 9) {
            alert(e.type + ": " + count++);
        }
        $("#textField").off("focusout keydown");
    });
    // when hitting enter, or tabbing away:
    $("#textField").on("keydown", function (e) {
        var code = e.keyCode ? e.keyCode : e.which;
        // if the key pressed is the enter or tab key:
        if (code === 13 || code === 9) {
            alert(e.type + ": " + count++);
        }
        $("#textField").off("keydown");
    });
}

…还有jsFiddle。

---

不过，我不认为这是一个可行的解决方案，因为这会导致不必要的代码重复，而且很难理解。

似乎focusout和keydown是不可分割的。。。因此，同时处理这两个事件并首先检查code !== 13，然后仅处理keydown并检查code === 13将分离事件。

但是，现在也必须处理选项卡密钥，ack！因此，我一致地包含了code !== 9和code === 9的检查。

Answer 4

$('Selector')
.on('keydown',function(e){
    if (13 == e.which) {
       // do somthing who lead 'focusout' like $('Somthing-else').click()
        $(this).unbind('focusout');
    }
})
.on('focusout', function(e){
    $('Somthing-else').click()
})

Answer 5

您有内联事件。。单击按钮时调用的setFocus();。删除内联事件并将脚本更改为此

$(document).ready(function(e) {
    var count= 1;
    $("#textField").on("focusout keydown", function(e) {
        if (e.type == "focusout" || e.keyCode == 13) {
            alert(count++);
        }
    });
});