Comment désactiver les événements de clic sur un objet DOM parent sans désactiver les événements de clic sur son objet DOM enfant?

Question

J'ai quelques HTML comme ceci:

<a class="button"> 
    <span> 
     <span> 
      <span class="buttonspan">Content</span> 
     </span> 
    </span> 
</a> 

J'ai déjà quelques événements sur le parent objet Anchor. Maintenant j'essaye d'ajouter un événement de clic sur l'élément de portée enfant et en même temps de désactiver des événements de clic sur l'objet ancre parent. J'utilise jQuery pour y parvenir, mais je ne pouvais pas comprendre. Mon code jQuery est comme ceci:

$('a.button').click(function(event){ 
    return false; 
}); 

$('.buttonspan').live('click', function(event){ 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
    // some function 
}); 

Si j'exécute le code ci-dessus, il empêche l'événement click élément enfant aussi bien. Mais si je ne fais pas la première partie, l'événement click parent sera également déclenché. Est-il possible de désactiver l'événement parent sans désactiver l'événement de clic enfant nouvellement ajouté?

Answer 1

Vous pouvez définir l'événement click sur le bouton parent et utiliser la cible d'événements pour déterminer ce qui a été cliqué et effectuer les actions nécessaires. Maver, merci beaucoup pour votre réponse rapide.

$('a.button').click(function(e) { 
    var $target = $(e.target); 

    if ($target.is('.buttonspan')) { 
     // do actions for the .buttonspan click 
    } else { 
     // do actions for a click anywhere else inside a.button 
     e.preventDefault(); 
    } 
});