1. ホーム
  2. javascript

[解決済み] チェックボックスクリック時のイベントバブリングを停止させる方法

2022-04-13 20:49:37

質問

チェックボックスがあり、クリックイベントで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="https://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>

しかし、デフォルトのクリック動作(チェックボックスがチェックされる/チェックされなくなる)を実行させないまま、イベントバブリングを停止する方法が分かりません。

以下の2つの方法は、イベントのバブリングを停止させますが、チェックボックスの状態は変更されません。

event.preventDefault();
return false;

解決方法は?

置き換える

event.preventDefault();
return false;

event.stopPropagation();

event.stopPropagation()

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

イベント.preventDefault()

ブラウザで実行されないようにする デフォルトのアクションを指定します。この場合 isDefaultPrevented であるかどうかを知ることができます。 このメソッドが(その イベントオブジェクトを使用します。)