stopPropagation() ne fonctionne pas pour l'événement délégué

Question

J'essaie de basculer .abb-bar, en utilisant $.toggle() chaque fois que son parent (.abb) obtient un clic. mais chaque fois que .abb-bar obtient un clic, son basculer lui-même à cause de event-bubbling. e.stopPropagation() devrait résoudre le problème, mais cela ne fonctionne pas. ce qui peut être fait?

HTML

<span class="col-auto entry-ops abb"> 
    <i class="fa fa-bars"></i> 
    <div class="list-group abb-bar"> 
     <button class="list-group-item list-group-item-action d-flex justify-content-center" data-user="nick">follow</button> 
     <button class="list-group-item list-group-item-action d-flex justify-content-center complain">complain</button> 
     <button class="list-group-item list-group-item-action d-flex justify-content-center show-entry-number" data-toggle="tooltip">'.$row['entry_id'].'</button> 
    </div> 
</span> 

JS

$(document).on('click', '.abb', function(e) { 
    e.stopPropagation(); 
    $(this).children('.abb-bar').toggle(); 
}); 

Answer 1

Vous ne devriez pas utiliser la délégation de l'événement ici. Au moment où l'événement atteint document, il ne lui reste plus qu'un élément à propager (window). Il a déjà été propagé jusqu'à document donc vous ne pouvez pas l'annuler rétroactivement pour les éléments sur lesquels il a déjà été déclenché. C'est la nature même de la délégation d'événement ... Laisser l'événement bouger tout le long et ensuite voir quel élément a provoqué l'événement.

Vous devez uniquement définir un événement click sur l'élément bascule et annuler l'événement click sur le conteneur enfant.

// Set the click event handler on the toggle area 
 
$('.abb').on('click', function(e) { 
 
    $('.abb-bar', this).toggle(); 
 
}); 
 

 
// Don't enable the click event on the child 
 
$('.abb-bar').on('click', function(e) { 
 
    e.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="col-auto entry-ops abb"> 
 
    <i class="fa fa-bars">Click to toggle</i> 
 
    <div class="list-group abb-bar"> 
 
     <button class="list-group-item list-group-item-action d-flex justify-content-center" data-user="nick">follow</button> 
 
     <button class="list-group-item list-group-item-action d-flex justify-content-center complain">complain</button> 
 
     <button class="list-group-item list-group-item-action d-flex justify-content-center show-entry-number" data-toggle="tooltip">'.$row['entry_id'].'</button> 
 
    </div> 
 
</span>