web-dev-qa-db-ja.com

jQuery on（）stopPropagationが機能していませんか？

これが伝播を停止するようには見えません。

  $(document).ready(function(){
      $("body").on("click","img.theater",function(event){ 
          event.stopPropagation();    
          $('.theater-wrapper').show();
      }); 

       // This shouldn't fire if I click inside of the div that's inside of the 
       // `.theater-wrapper`, which is called `.theater-container`, anything else it should.
       $(".theater-wrapper").click(function(event){
           $('.theater-wrapper').hide();
       }); 
  });

このjsfiddleを参照

javascriptjquerystoppropagationpropagation
20
Dylan Cross

on要素では直接bodyを使用しており、img.theaterでは直接使用していないため、イベントはbody要素までバブルアップし、それが機能します。

イベントバブリングの過程で.theater-wrapper要素clickイベントがトリガーされるため、表示されます。

動的要素を作成しない場合は、img.theater要素にクリックイベントハンドラーを直接アタッチします。

$("img.theater").click(function(event){
    event.stopPropagation();    
    $('.theater-wrapper').show();
});

または、.theater-wrapper要素clickハンドラー内のclickイベントのターゲットを確認し、何もしないこともできます。

$(".theater-wrapper").click(function(event){
    if ($(event.target).is('img.theater')){
         event.stopPropagation();
         return;
    }
    $('.theater-wrapper').hide();
});
26
ShankarSangoli

これを行う最善の方法は次のとおりです。

$(".theater-wrapper").click(function(event){
    if (!$(event.target).is('img.theater')){
        $('.theater-wrapper').hide();
    }
});

アコーディオンとチェックボックスでそれは私のために働いています

4
Fassbender

あなたのjsfiddle @Dylanに応答します

ここ：白いスポットをクリックしても、閉じないはずです。 jsfiddle.net/Cs8Kq -ディラン

変化する

if ($(event.target).is('img.theater')){

に

if ($(event.target).is('.theater-container')){

そしてそれは動作します。

これを解決するには、イベントハンドラーでconsole.log（event.target）を使用し、話している白い領域をクリックしたときにログアウトしたセレクターを使用します。

代わりにコメントを書いたのですが、SOスターダストとコインが足りません。

編集：このように jsfiddle.net/heNP4/

0
Nicolai S

event.stopImmediatePropagation（）を使用してください

0
Bryan