3


イベント ハンドラ でfocusoutとの 2 つのイベントを処理しています。イベント ハンドラ内の最後の行としての 呼び出しが部分的に機能しているようです--  正しく機能していますが、 2 回起動しています。 keydown$(elementID).on()

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

編集: With@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があります。

4

5 に答える 5

5

私が推測できることから、Enterキーダウンイベントを押すと、キーダウンのアラートがトリガーされ、次にフォーカスアウトがトリガーされ、デフォルト機能に入るためにフォーカスアウトがトリガーされ、フォーカスアウトがアラートされます。Enterキーが押された場合、フォーカスアウトのバインドを解除する必要があります

    $("#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 です

于 2013-08-08T13:33:21.087 に答える
0


さて、ここに厄介なハックがあります：

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。


ただし、これは実行可能な解決策ではないと考えています。これは、不要なコードの重複につながり、理解するのが難しいため です。とは切り離せない

ように思えます...したがって、両方を同時に処理して最初にそれをチェックし、次にのみを処理してそれをチェックすると、イベントが分離されます。 ただし、キーも処理する必要があります。したがって、一致してandのチェックも含めました。focusoutkeydowncode !== 13keydowncode === 13

Tabcode !== 9code === 9

于 2013-07-30T03:16:07.293 に答える
0 
$('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()
})
于 2014-05-03T15:17:44.687 に答える
0

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/

于 2013-07-30T01:35:06.233 に答える