web-dev-qa-db-fra.com

jQuery stopPropagation bubble down

J'ai une div avec un lien à l'intérieur:

<div id="myDiv">
    <a href="http://www.lol.com">Lol</a>
</div>

En cliquant sur <div /> devrait aller quelque part, mais en cliquant sur l'enfant <a /> devrait aller sur www.lol.com. J'ai vu de questions précédentes et du site Web jQuery que .stopPropagation empêche la formation de bulles vers le haut, mais comment puis-je empêcher une bulle vers le bas (n'est-ce pas ce qui est nécessaire ici?) .

jqueryevent-bubbling
30
atp

Les événements ne font que bouillonner. Ainsi, le gestionnaire d'événements click pour l'élément a est déclenché avant le gestionnaire d'événements click pour div. Si vous voulez le comportement que vous décrivez, vous devez ajouter un gestionnaire d'événements click à l'élément a qui arrête la propagation vers le div.

$("#myDiv a").click( function(event) {
    event.stopPropagation();
} );

et conservez le gestionnaire d'événements que vous avez sur le div. Cela devrait permettre à l'événement d'effectuer son action par défaut et d'empêcher le gestionnaire du div d'être déclenché.

Si vous souhaitez uniquement empêcher les clics sur les liens, vous pouvez modifier votre gestionnaire d'événements pour l'élément div

$("#myDiv").click( function( event ) {
    if( !$( event.target ).is( "a" ) )
    {
        // existing event handler
    }
} );
45
Geoff

Le problème était que le fait de cliquer sur l'ancre déclenchait toujours un clic dans votre <div>. C'est ce qu'on appelle le "bouillonnement d'événements".

En fait, il existe plusieurs solutions:

Vérification dans le gestionnaire d'événements de clic DIV si l'élément cible réel était l'ancre → jsFiddle

$('#myDiv').click(function (evt) {
    if (evt.target.tagName != "A") {
        alert('123');
    }

    // Also possible if conditions:
    // - evt.target.id != "ancherComplaint"
    // - !$(evt.target).is("#ancherComplaint")
});

$("#ancherComplaint").click(function () {
    alert($(this).attr("id"));
});

Arrêter la propagation des événements depuis l'écouteur de clic d'ancrage → jsFiddle

$("#ancherComplaint").click(function (evt) {
    evt.stopPropagation();
    alert($(this).attr("id"));
});

Comme vous l'avez peut-être remarqué, j'ai supprimé la partie sélecteur suivante de mes exemples:

:not(#ancherComplaint)

Cela n'était pas nécessaire car il n'y a aucun élément avec la classe .expandable-panel-header qui a également #ancherComplaint comme son ID.

Je suppose que vous vouliez supprimer l'événement pour l'ancre. Cela ne peut pas fonctionner de cette manière car les deux sélecteurs (le vôtre et le mien) sélectionnent exactement le même DIV. Le sélecteur n'a aucune influence sur l'auditeur lorsqu'il est appelé; il définit uniquement la liste des éléments auxquels les écouteurs doivent être enregistrés. Comme cette liste est la même dans les deux versions, il n'y a pas de différence.

3
Vijay