Perché l'evento di transizione può essere eseguito quando la transizione dei figli di un elemento è terminata?

Question

Ho associato un evento transitionend a div1. Al termine della transizione di div1, l'evento è stato eseguito. Non c'è problema.

ho incontrato un caso speciale:

ho aggiunto 3 punti a questo div1, quando la transizione di ogni paragrafo è finita, transitionend evento div1 s' anche corse. Quindi l'evento transitionend è stato eseguito 4 volte. >. <

In transitionend corpo di funzione listener dell'evento div1 s', vedo che event.target! == this. Sento che è abbastanza ridicolo!

Chrome e Firefox hanno entrambi questo problema. Quindi immagino che questo non sia un bug di implementazione delle specifiche HTML5 di un browser.

Qualcuno può spiegare perché l'evento transitionend di un elemento può essere attivato anche dall'elemento figlio di questo elemento?

Grazie.

Answer 1

Questo è chiamato evento spumeggiante. Per impostazione predefinita, molti eventi che si verificano su un elemento figlio vengono visualizzati dai genitori dopo che il gestore eventi viene chiamato sull'oggetto di origine. Puoi rilevare bubbling come hai notato esaminando l'oggetto event oppure puoi evitare il bubbling interrompendo la propagazione quando gestisci l'evento sull'oggetto di origine.

Arrestare la propagazione è una di quelle cose che sono diverse in IE rispetto ad altri browser. In altri browser, si chiama:

event.stopPropagation() 

In IE prima di IE9:

window.event.cancelBubble = true;