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