Comment empêcher l'événement onclick d'un parent de se déclencher lorsque l'on clique sur une ancre enfant?

J'utilise actuellement jQuery pour rendre un div cliquable et dans ce div, j'ai également des ancres. Le problème que je rencontre est que lorsque je clique sur une ancre, les deux événements de clic se déclenchent (pour la div et l'ancre). Comment puis-je empêcher l'événement onclick de la division de se déclencher lorsqu'un clic sur une ancre est activé?

Voici le code cassé:

Javascript

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Les événements remontent au point le plus élevé du DOM auquel un événement de clic a été attaché. Donc, dans votre exemple, même si vous n'aviez aucun autre élément explicitement cliquable dans le div, chaque élément enfant du div ferait bouillonner son événement click dans le DOM jusqu'à ce que le gestionnaire d'événement click du DIV l'attrape.

Il y a deux solutions à cela: vérifier pour savoir qui est à l'origine de l'événement. jQuery transmet un objet eventargs avec l'événement:

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

Vous pouvez également attacher un gestionnaire d'événements Click à vos liens qui leur dit d' arrêter la propagation d'événements après l'exécution de leur propre gestionnaire:

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

Utilisez la méthode stopPropagation , voir un exemple:

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

Comme l'a dit jQuery Docs:

stopPropagation empêche l'événement de se propager dans l'arborescence DOM, empêchant les gestionnaires parents d'être notifiés de l'événement.

Gardez à l'esprit que cela n'empêche pas les autres écouteurs de gérer cet événement (par exemple, plus d'un gestionnaire de clic pour un bouton), si ce n'est pas l'effet souhaité, vous devez utiliser à la stopImmediatePropagationplace.

Voici ma solution pour tous ceux qui recherchent un code non jQuery (javascript pur)

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

Votre code ne sera pas exécuté si vous cliquez sur les enfants des parents

vous pouvez également essayer ceci

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

Si vous n'avez pas l'intention d'interagir avec les éléments internes dans tous les cas, une solution CSS peut vous être utile.

Réglez simplement le ou les éléments intérieurs sur pointer-events: none

dans ton cas:

.clickable > a {
    pointer-events: none;
}

ou pour cibler tous les éléments internes en général:

.clickable * {
    pointer-events: none;
}

Ce hack facile m'a fait gagner beaucoup de temps lors du développement avec ReactJS

Le support du navigateur peut être trouvé ici: http://caniuse.com/#feat=pointer-events

Si vous avez plusieurs éléments dans le div cliquable, vous devez le faire:

$('#clickable *').click(function(e){ e.stopPropagation(); });

L'utilisation de return false;ou e.stopPropogation();ne permettra pas l'exécution de code supplémentaire. Il arrêtera le flux à ce point lui-même.

Écrire si quelqu'un a besoin (a travaillé pour moi):

event.stopImmediatePropagation()

De cette solution.

Alternative en ligne:

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Voici un exemple d'utilisation d'Angular 2+

Par exemple, si vous souhaitez fermer un composant modal si l'utilisateur clique en dehors de celui-ci:

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}

Vous devez empêcher l'événement d'atteindre (se propager) au parent (le div). Voir la partie sur le bullage ici et les informations API spécifiques à jQuery ici .

Pour spécifier un sous-élément comme non cliquable, écrivez la hiérarchie css comme dans l'exemple ci-dessous.

Dans cet exemple, j'arrête la propagation vers tous les éléments (*) à l'intérieur de td à l'intérieur de tr à l'intérieur d'une table avec la classe ".subtable"

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

ignoreParent () est une solution JavaScript pure.

Il fonctionne comme une couche intermédiaire qui compare les coordonnées du clic de la souris avec les coordonnées des éléments enfants. Deux étapes d'implémentation simples:

1. Mettez le code ignoreParent () sur votre page.

2. Au lieu de l'original onclick = "parentEvent ();" du parent , écrire:

onclick="ignoreParent(['parentEvent()', 'child-ID']);"

Vous pouvez transmettre des ID de n'importe quel nombre d'éléments enfants à la fonction et en exclure d'autres.

Si vous avez cliqué sur l'un des éléments enfants, l'événement parent ne se déclenche pas. Si vous avez cliqué sur parent, mais sur aucun des éléments enfants [fournis comme arguments], l'événement parent est déclenché.

Code ignoreParent () sur Github

S'il est dans un contexte en ligne, en HTML, essayez ceci:

onclick="functionCall();event.stopPropagation();

Au cas où quelqu'un aurait eu ce problème en utilisant React, voici comment je l'ai résolu.

scss:

#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }

#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }

Rendu du composant ():

render() {
    ...
    return (
        <div id='loginBackdrop' onClick={this.props.closeLogin}>
            <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

En ajoutant une fonction onClick pour le modal enfant (content div), les événements de clic de souris sont empêchés d'atteindre la fonction 'closeLogin' de l'élément parent.

Cela a fait l'affaire pour moi et j'ai pu créer un effet modal avec 2 divs simples.

ajouter acomme suit:

<a href="http://foo.com" onclick="return false;">....</a>

ou à return false;partir du gestionnaire de clic pour #clickablecomme:

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

Toutes les solutions sont compliquées et de jscript. Voici la version la plus simple:

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>