Click fuera de un elemento con JQuery

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