web-dev-qa-db-ja.com

チェックボックスをクリックしたときにイベントのバブリングを停止する方法

クリックイベントでAjaxアクションを実行するチェックボックスがありますが、チェックボックスがクリックされたときに実行したくない独自のクリック動作を持つコンテナー内にもチェックボックスがあります。このサンプルは、私がやりたいことを示しています。

$(document).ready(function() {
  $('#container').addClass('hidden');
  $('#header').click(function() {
    if ($('#container').hasClass('hidden')) {
      $('#container').removeClass('hidden');
    } else {
      $('#container').addClass('hidden');
    }
  });
  $('#header input[type=checkbox]').click(function(event) {
    // Do something
  });
});
#container.hidden #body {
  display: none;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="container">
  <div id="header">
    <h1>Title</h1>
    <input type="checkbox" name="test" />
  </div>
  <div id="body">
    <p>Some content</p>
  </div>
</div>

ただし、デフォルトのクリック動作（チェックボックスがオン/オフになる）を実行せずにイベントバブリングを停止する方法はわかりません。

次の両方は、イベントのバブリングを停止しますが、チェックボックスの状態も変更しません。

event.preventDefault();
return false;
javascriptjquerycheckboxevents
168
roryf

取り替える

event.preventDefault();
return false;

と

event.stopPropagation();

event.stopPropagation（）

親要素へのイベントのバブリングを停止し、親ハンドラーにイベントが通知されないようにします。

event.preventDefault（）

ブラウザがデフォルトのアクションを実行しないようにします。メソッドisDefaultPreventedを使用して、このメソッドが（そのイベントオブジェクトで）呼び出されたかどうかを確認します。

315
rahul

StopPropagationメソッドを使用します。

event.stopPropagation();
32
Patrice Neff

IEを忘れないでください：

if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}
28
Faraz Kelhini

JQueryを使用する場合、個別に停止関数を呼び出す必要はありません。

イベントハンドラでfalseを返すことができます

これにより、イベントが停止し、バブリングがキャンセルされます。

event.preventDefault（）vs. falseを返す も参照してください。

JQueryドキュメントから：

したがって、これらのハンドラーは、event.stopPropagation()を呼び出すか、falseを返すことにより、委任されたハンドラーがトリガーされないようにすることができます。

5
DutchKevv

これは、イベントバブリングの概念を理解するための優れた例です。上記の回答に基づいて、最終的なコードは次のようになります。ユーザーがチェックボックスをクリックすると、event.stopPropagation();を使用して、親要素 'header'へのイベント伝播が停止されます。

$(document).ready(function() {
            $('#container').addClass('hidden');
            $('#header').click(function() {
                if($('#container').hasClass('hidden')) {
                    $('#container').removeClass('hidden');
                } else {
                    $('#container').addClass('hidden');
                }
            });
          $('#header input[type=checkbox]').click(function(event) {
              if (event.stopPropagation) {    // standard
                   event.stopPropagation();
               } else {    // IE6-8
                    event.cancelBubble = true;
               }
          });     
  });
5
mehras

他の人が言及したように、stopPropagation()を試してください。

試してみる2番目のハンドラーがあります：event.cancelBubble = true;これはIE固有のハンドラーですが、少なくともFFではサポートされています。私はそれを自分で使用したことがないので、実際にはあまり知りませんが、他のすべてが失敗した場合、一撃の価値があるかもしれません。

5
peirix

コードの @ mehras に感謝します。私はそれを実証するためにスニペットを作成しました。それは高く評価されると思い、その機能を試すための言い訳が欲しかったからです。

$(document).ready(function() {
  $('#container').addClass('hidden');
  $('#header').click(function() {
    if ($('#container').hasClass('hidden')) {
      $('#container').removeClass('hidden');
    } else {
      $('#container').addClass('hidden');
    }
  });
  $('#header input[type=checkbox]').click(function(event) {
    if (event.stopPropagation) { // standard
      event.stopPropagation();
    } else { // IE6-8
      event.cancelBubble = true;
    }
  });
});
div {
  text-align: center;
  padding: 2em;
  font-size: 1.2em
}

.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header"><input type="checkbox" />Checkbox won't bubble the event, but this text will.</div>
<div id="container">click() bubbled up!</div>
1
user2503764