クリック イベントで何らかの 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>ただし、デフォルトのクリック動作 (チェックボックスがオン/オフになる) が実行されないようにせずに、イベントのバブリングを停止する方法がわかりません。
次の両方ともイベントのバブリングを停止しますが、チェックボックスの状態も変更しません。
event.preventDefault();
return false;
ベストアンサー1
交換する
event.preventDefault();
return false;
と
event.stopPropagation();
イベント.stopPropagation()
親要素へのイベントのバブリングを停止し、親ハンドラーにイベントが通知されないようにします。
イベント.preventDefault()
ブラウザがデフォルトのアクションを実行しないようにします。このメソッドが（そのイベント オブジェクトで）呼び出されたかどうかを確認するには、isDefaultPrevented メソッドを使用します。