evento Mastering bubbling

Question

Consente di dire che abbiamo una struttura HTML come questo

<div id="container"> 
    <div id="nested"> 
     <span id="someElement"></span> 
    </div> 
</div> 

... e il nostro obiettivo è quello di avere un listener di eventi sul #containersolo! Quindi, noi leghiamo un ascoltatore (codice jQuery)

$("#container").on('click', function(event) { 
    alert("container was clicked"); 
}); 

che funziona, naturalmente, ma il mio problema con questo approccio è che, dal momento che gli eventi di solito bolla, che ascoltatore anche sparare se abbiamo effettivamente clicchiamo su #nested o #someElement . La mia soluzione attuale solo gestire il click quando il #container viene cliccato è quello di confrontare this con event.target

$("#container").on('click', function(event) { 
    if(this === event.target) { 
     alert("container was clicked"); 
    } 
}); 

La mia domanda: che considerava "best practice"? C'è un modo migliore con jQuery per ottenere lo stesso risultato "out of the box"?

Esempio in azione: http://jsfiddle.net/FKX7p/

Answer 1

Soluzione alternativa:

$("#container").click(function(){ 
    alert("container was clicked"); 
}).children().click(function(e) { 
    return false; 
}); 

Ma la soluzione è migliore. jsfiddle.net/FKX7p/2/ (con ritorno false) OR jsfiddle.net/FKX7p/3/ (usando stopPropagation)

ho Utilizza ritorno nel tuo esempio (codice diventa più facile da leggere):

if(this !== event.target) return; 

Answer 2

io non sono sicuro che uno il lavoro di più veloce, ma faccio senso che il codice successivo sarà meglio:

$("#container").click(function (e) { 
    if (e.target.id && e.target.id !== "container") return false; 
}); 

Answer 3

Un modo alternativo per prevenire eventi da gorgogliare consiste nell'utilizzare event.stopPropagation();

$("#container").on('click', function(event) { 
    alert("container was clicked"); 
}) 
.children().on('click', function(event) { 
    event.stopPropagation(); 
}); 

penso che il vantaggio di utilizzare questo approccio è che se si desidera collegare un altro evento al div nidificato, si può semplicemente utilizzare

$("#nested").on('click', function(event) { 
    event.stopPropagation(); 
    // some action 
}); 

$("#container").on('click', function(event) { 
    alert("container was clicked"); 
});​