jquery - 在处理焦点输出和按键按下时，如何防止输入键触发焦点输出？

Question

我正在事件处理程序中处理两个事件，两者都是focusout和。 作为事件处理程序中的最后一行 调用似乎部分工作 -  工作正常，但正在触发两次。 keydown$(elementID).on()

$(elementID).off("focusout keydown");.on()focusoutkeydown

---

编辑：随着@Barmar的发现，首先keydown触发focusout然后. 这发生在 Firefox 22 中，但显然不在 Chrome 29 中。 keydown

---

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

From what i can deduce, that when you press enter keydown event is triggered alert for keydown opens and then focusout is triggered coz of enter default functionality then alert for focusout. So what you have to do is unbind the focusout if enter is pressed

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

Here is the edited JsFiddle

Answer 2

好的，所以这是一个讨厌的 hack：

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将分离事件。

但是，现在Tab也必须处理密钥，ack！所以，我一致地包括检查code !== 9和code === 9。

Answer 3

$('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 4

您是否尝试过使用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 5

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

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