4

イベントを に設定しましたwrapper divが、この中divに がいくつかあります。このイベントが で発生するのを防ぐbuttonsにはどうすればよいですか?wrapperbuttons

html :

<div class="wrapper-alert"> <!-- click here will pop-up -->
   <div class="somethingElse"> <!-- click here will pop-up -->
      Some text            
   </div>
   <div class="this-is-my-action">
      <button class="inside-alert">Inside</button> <!-- click here will NOT pop-up-->
   </div>
   <div class="somethingElseTo"> <!-- click here will pop-up -->
      Some text            
   </div>
</div>​

より明確にするためにjsfiddleを作成しました。

したがって、基本的に、wrapper-alertメッセージをクリックするとポップアップが表示されますが、他のメッセージをクリックすると問題がbutton発生します。問題は、ボタンがラッパーの子であるため、2 つのイベントが同時に発生することです。

私は何かを試してみましたが、1つまたはいくつかの基本的な構造でif (e.target !== this) return;しか機能しません。children

4

1 に答える 1

8

メソッドを使用できますstopPropagation。

イベントが DOM ツリーをバブリングしないようにして、親ハンドラーにイベントが通知されないようにします。

$(".inside-alert").on("click", function(event){
     event.stopPropagation()
     alert('this is my BUTTON' + event.target); // dont pop-up anything
});
于 2012-11-05T17:23:49.747 に答える