javascript - immediate - stop all events jquery

Dominio del evento burbujeante

Question

Digamos que tenemos una estructura HTML como esta

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

... y nuestro objetivo es tener un oyente de eventos en el #container solamente ! Entonces, unimos un oyente (código jQuery)

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

Eso funciona, por supuesto, pero mi problema con este enfoque es que, dado que los eventos suelen brotar, ese oyente también se activará si hacemos clic en #nested o #someElement . Mi solución actual para manejar solo el clic cuando se hace clic en #container es comparar this con event.target

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

Mi pregunta: ¿eso se considera "mejor práctica"? ¿Hay una mejor manera con jQuery para lograr el mismo resultado "fuera de la caja"?

Ejemplo en acción: http://jsfiddle.net/FKX7p/

Answer 1

No estoy seguro de cuál trabajo es más rápido, pero tiene sentido que el próximo código sea mejor:

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

Answer 2

Solución alternativa:

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

Pero tu solución es mejor. jsfiddle.net/FKX7p/2/ (con return false) O jsfiddle.net/FKX7p/3/ (usando stopPropagation)

Prefiero el uso de retorno en tu ejemplo (el código se vuelve más fácil de leer):

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

Answer 3

Una forma alternativa de evitar el burbujeo de eventos es usar event.stopPropagation ();

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

Creo que la ventaja de utilizar este enfoque es que si desea adjuntar otro evento al div anidado, puede simplemente usar

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