11

このサンプルコードを持っている：

<input type="text" id="changeid">
<a href="#" id="clickb">click</a>

<script>
    $('#clickb').on("click", function(event){
        alert(1);                             
        return false;
    });

    $('#changeid').on("change", function(event){
        alert(2);                             
        return false;
    });
</script>

テキスト フィールドに何かを入力してすぐにリンクをクリックすると、onchange イベントのみが発生し、リンク クリック イベントは発生しません。何故ですか？変更イベントがクリック イベントをブロックしているようです。

4

4 に答える 4

11

によってブロックされていalertます。あなたに変更alertするconsole.logと、2つのイベントがすべて発生します。

デモ。

$('#clickb').on("click", function(event){
    console.log(1);
    return false;
});

$('#changeid').on("change", function(event){
   console.log(2);                             
   return false;
});​
于 2012-09-13T10:21:42.317 に答える
4

入力を編集してからリンクをクリックすると、内部で次のようになります

  1. 「リンク」をクリックし始めます。最初にブラウザがクリーンアップ作業を行うため、イベントはまだ生成されていません（マウスダウンさえも）。
  2. 入力はフォーカスを失い、blurイベントを発生させます
  3. 入力が発生し、値が変更されchangeたため、入力によってイベントが発生しますblur
  4. イベントchangeコールバックはalert(2)
  5. 新しいウィンドウが表示されたため、ドキュメントのフォーカスが失われます
  6. リンクでが発生することはありませんclick。

解決策は使用しないことですalert（xdazzが提案したように）。

于 2012-09-13T10:23:33.753 に答える
0

onchange イベントは、要素がぼかされた後にのみ発生します。したがって、テキストを入力して最初にリンクをクリックすると、テキストフィールドで要素がぼやけます。テキスト フィールドで行われた変更を追跡する onkeyup イベントを持つ変更イベントを処理する最良の方法。

于 2012-09-13T10:25:08.353 に答える