web-dev-qa-db-ja.com

jQueryで子divから親divへのclick（）イベントを防ぐ方法は？

状況：

<div class="header">
    <div style="float: left;" class="headerTitle">+ OPEN</div>
    <div class="closeBtn" style="float: right;">- CLOSE</div>
 </div> 
<div class="touristenContent">.....</div>

視覚的に：

| +開く.............................. |-閉じる| .. | （ヘッダー）
 
 | ............コンテンツ....................... ... |

ヘッダーDIVは、コンテンツを開くためのjQuery click（）イベントを持つ「大きなボタン」です​​。閉じるDIVは大きなヘッダーDIV内にあり、閉じるボタンもclick（）イベントで表し、コンテンツを閉じます。この閉じるボタンは、大きなヘッダーをクリックすることでのみ表示されます。

ヘッダーをクリックしてコンテンツを反対にすることは期待どおりに機能しますが、閉じるボタンをクリックすると、ヘッダーDIVまでクリックイベントが通過します。 2回のクリックイベントが発生したため、コンテンツが閉じて再び開きます。

閉じるボタンを固体にし、クリックしてヘッダーに到達しないように、全体を適切に設計するにはどうすればよいですか？

jqueryeventsclick
33
Paul Geisler

イベントの伝播を停止する DOMツリーを上にする必要があります。

$('.closeBtn').click(function (evt) {
    evt.stopPropagation();

    // Your code here
});
53
Andy E
$('.closeBtn').click(function (event){
   event.stopPropagation();
   //   ... your code here
   return false;
});

これでうまくいくはずなので、閉じるをクリックするたびにヘッダーdivに影響はありません。

14
Val

親divではなく<div style="float: left;" class="headerTitle">+ OPEN</div>でopenイベントをフックしないのはなぜですか。それ以外の場合、return falseまたはstopPropagation内のdivクリックハンドラーから

0
hungryMind