gestion des événements bubling dans jquery

Question

iam liens ayant comme indiqué ci-dessous

<a item='1' href='javascript:void(0)'><img class='icon1' /><span>text1</span></a> 
<a item='1' href='javascript:void(0)'><img class='icon2' /><span>text2</span></a> 
<a item='1' href='javascript:void(0)'><img class='icon3' /><span>text3</span></a> 
<a item='1' href='javascript:void(0)'><img class='icon4' /><span>text4</span></a> 


$(function(){ 
$('a').click(_handleClick); 
}); 

function _handleClick(e) 
{ 
var _item=$(e.target).attr('item'); 
// do something with _item variable 
} 

// maintenant mon problème est lorsque l'utilisateur clique sur l'image « e » reçu dans _handleClick est l'image donc je ne peux pas lire l'article 'attr = 'alors comment bulle l'événement pour lire cette valeur.

Answer 1

Vous ne devriez pas du tout avoir besoin de manipuler le bouillonnement d'événements puisque l'élément 'a' auquel est attaché le gestionnaire d'événements stocke également l'attribut 'item'. Dans ce cas, vous utilisez simplement 'this' pour faire référence à l'élément avec l'événement click, et $ (this) .attr ('item') récupérera la valeur de 'item'.

Cette ligne:

var _item=$(e.target).attr('item'); 

devrait être:

var _item=$(this).attr('item'); 

EDIT: Clarification de la première phrase, et a ajouté les informations suivantes:

Pour clarifier les choses, bouillonnement d'événement est automatique en jQuery. Si vous cliquez sur l'enfant d'un élément, l'événement se propage jusqu'au sommet et déclenche les événements au fur et à mesure.

Il est parfois nécessaire d'arrêter la mise à feu avec event.stopPropagation().

D'autres fois, il est pratique. Par exemple, considérons un 'div' qui a 100 enfants, qui devraient tous recevoir le même événement click. Au lieu de consommer toute la ressource dont il a besoin pour gérer les gestionnaires d'événements pour ces 100 enfants, vous pouvez attribuer un événement 1 click au parent, puis utiliser event.target pour déterminer lequel a été cliqué.

Une autre bonne chose à propos de cette approche, c'est que vous n'avez pas besoin d'utiliser live() lorsque vous ajoutez dynamiquement des enfants supplémentaires à ce parent. Comme ils déclenchent tous le cliquetis du parent à cause du bouillonnement, ils sont prêts à partir.

Answer 2

Essayez plutôt de faire la cible de cliquer directement:

$(function(){ 
    $('a').click(function() { 
    var _item = $(this).attr('item'); 
    // do something with _item variable   
    }); 
}); 

Bien que l'événement click est tiré sur tous les éléments parents, le e.target est toujours la source du clic, le plus profond enfant d'origine que vous avez cliqué. ..jQuery avec le $(this) gère cela, pas besoin de s'inquiéter quel élément enfant ci-dessous l'a déclenché.

Answer 3

var _item=$(e.target).parents('a').attr('item');