jQuery on() y stopPropagation()

Question

Tengo un panel lateral que se desliza desde la izquierda, agregando contenido dinámicamente con get(). Quiero que todos los clics fuera del panel hagan que se cierre al activar una función. En base a otras preguntas que leí, se me ocurrió el siguiente código.

$('html').click(function() { 
    if (side_showing) { 
     close_side(); 
    } 
}); 

$(document).on("click", "#side", function(event) { 
    event.stopPropagation(); 
}); 

Parece que no puedo hacer que funcione. Sé que la función on() se está activando, pero event.stopPropagation no parece ser así. ¿Algun consejo?

Answer 1

No puede usar stopPropagation() con manejo delegado de eventos (donde el controlador de eventos está en un elemento primario).

Esto se debe a que la propagación de eventos hace que el manejo de eventos delegados funcione en primer lugar, por lo que cuando se llama al controlador de eventos, el evento ya se ha propagado.

El orden de las cosas que suceden en el código es: la propagación de eventos hasta el objeto del documento, luego se llama al controlador de eventos. Entonces, cuando llamas al event.stopPropagation(), no hace nada porque el evento ya se propagó.

Si necesita evitar que los objetos principales obtengan propagación de eventos, no puede usar el manejo delegado de eventos. Tendrá que asignar controladores de eventos directamente a los objetos para que pueda interceptar el evento ANTES de que se propague. Si se trata de objetos creados dinámicamente, tendrá que asignarles controladores de eventos inmediatamente después de su creación.

La única otra solución que conozco es poner controladores de eventos en los objetos principales que no desea ver estos eventos y asegurarse de que esos controladores ignoren los eventos si se originan en su objeto #side.