Span all'interno Ancora con bubbling degli eventi

Question

Ho un pezzo di HTML:

<li class="addToFriends"><a href="....">Something something<span>INSIDE SPAN</span>something</a></li> 

Per gestire la richiesta AJAX quando si clicca su di ancoraggio gestore su eventi click Mi sono registrato:

$('.addToFriends a').click(function(event){ 
    var target = $(event.target); 
    if (target.is('a')) { 
       // if I click on SPAN element following fragment won't execute! 


     // do ajax request 
    }  
    event.preventDefault(); 
}); 

Le mie domande sono :

• perché l'evento click viene generato per l'elemento span? Dopotutto, non ho associato l'evento click agli elementi SPAN
• a parte la domanda precedente, ho pensato che se non avessi gestito l'evento click SPAN, il browser userà l'evento-bubbling per aumentare l'evento click per l'ancora (se ho vinto chiamare event.stopPropagation()). Ma ho anche non ha funzionato per me come l'evento click viene generato solo una volta

Così ora, ho ottenuto rotonda che problema che ho la mia soluzione è:

$('.addToFriends a').click(function(event){ 
    var target = $(event.target); 
    if (!target.is('a')) { 
     target = target.parent('a') 
    } 
      ... 
}); 

Ma ancora, io sono curioso di sapere perchè funziona così ...

Grazie,

Paweł

Answer 1

è necessario utilizzare il currentTarget del vostro evento.

$('.addToFriends a').click(function(event){ 
    event.currentTarget;  
    ... 
}); 

Answer 2

Ok, ma se clicco su SPAN e chiamo stopPropagation() Metodo mio codice in quella forma non funziona:

$('.addToFriends a').click(function(event){ 
    var target = $(event.target); 
    if (target.is('a')) { 
     // do ajax request 
     event.stopPropagation();    
     event.preventDefault(); 
    } 

});

Tuttavia, mi mancano alcuni punti cruciali relativi al bubbling degli eventi.

Answer 3

È sempre possibile leggere specification. È disponibile anche un buon tutorial here.

StopPropagation ha significato solo se sono stati definiti gestori di eventi di clic sia per gli elementi SPAN che per quelli A. Chiamando stopPropagation nel gestore eventi SPAN si impedirà il richiamo del gestore A. Questo presuppone la fase di bolla predefinita.