A veces se nos puede dar la situación de necesitar controlar los eventos click que se hacen fuera de un elemento o sus hijos, por ejemplo para cerrar un submenú o una ventana flotante.
// click fuera de un elemento o sus hijos
$(document).on('touchstart click',function (e){
var container = $("#contenedor");
if (!container.is(e.target) && $(e.target).closest(container).length == 0) {
console.log ("click fuera del elemento");
}else{
console.log ("click dentro del elemento o alguno de sus hijos");
}
});
Utilizamos on(‘touchstart click’) para que no sirva tanto para web como para movil.
Aquí tienes la versión de Vanilla Javascript.
// click fuera de un elemento o sus hijos
document.addEventListener("click", function (e) {
var container = "contenedor";
var target = e.target;
while(target && target !== document && target.id !== container) {
target=target.parentNode;
}
if (target.id != container) {
console.log ("click fuera del elemento");
}else{
console.log ("click dentro del elemento o alguno de sus hijos");
}
});