Dominio del evento burbujeante

Digamos que tenemos una estructura HTML como esta

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

… y nuestro objective es tener un oyente de events 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 events 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/

Una forma alternativa de evitar el burbujeo de events 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 nested, puede simplemente usar

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

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; }); 

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;