web-dev-qa-db-fra.com

jQuery on () stopPropagation ne fonctionne pas?

Je n'arrive pas à obtenir que cela cesse de se propager ..

  $(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();
       }); 
  });

Reportez ce jsfiddle

javascriptjquerystoppropagationpropagation
19
Dylan Cross

Puisque vous utilisez on sur l'élément body et non directement sur img.theater, l'événement va se propager jusqu'à l'élément body et c'est ainsi qu'il fonctionne.

Au cours de l'événement, les éléments .theater-wrapper et click de Bubbling seront déclenchés et vous le verrez.

Si vous ne créez aucun élément dynamique, attachez le gestionnaire d'événements click directement sur l'élément img.theater.

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

Vous pouvez également vérifier la cible de l'événement click dans le gestionnaire .theater-wrapper elements click et ne rien faire.

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

La meilleure façon de faire est: 

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

Cela fonctionne pour moi avec un accordéon et une case à cocher

3
Fassbender

En réponse à votre jsfiddle @Dylan

Ici: lorsque vous cliquez sur le point blanc, il ne devrait pas se fermer. jsfiddle.net/Cs8Kq - Dylan

Changement

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

à

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

et ça va marcher.

J'ai résolu ce problème en utilisant console.log (event.target) dans le gestionnaire d'événements et en utilisant simplement le sélecteur qui s'est déconnecté lorsque j'ai cliqué sur la zone blanche dont vous parlez.

J'aurais commenté à la place, mais je n'ai pas assez de SO stardust et de pièces.

EDIT: Comme ceci jsfiddle.net/heNP4/

0
Nicolai S

utilisez event.stopImmediatePropagation () Cela a fonctionné pour moi

0
Bryan