[解決済み] チェックボックスクリック時のイベントバブリングを停止させる方法
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 であるかどうかを知ることができます。 このメソッドが(その イベントオブジェクトを使用します。)
関連
-
JavaScriptの関数この指摘の問題を説明
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
JavaScriptの関数この指摘の問題を説明
-
親子コンポーネント通信を解決する3つのVueスロット
-
Vueのフィルタの説明
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
jq は html ページとデータを動的に分割する。
-
[解決済み] event.preventDefault() vs. return false