Question

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

将$(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

从我可以推断出，当你按下Enter keydown 事件被触发警报打开keydown然后 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是否将事件分开。

但是，现在 Tab 键也必须处理， 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++);
        }
    });
});

在处理focusout和keydown时，如何防止enter键触发焦点？

5 个答案: