Hacemos una verificación profunda cada secciones en nuestro sitio web con el objetivo de mostrarte siempre la información certera y actual.
Solución:
En puro Javascript
¡Mira este violín y mira si eso es lo que buscas!
document.getElementById('outer-container').onclick = function(e)
if(e.target != document.getElementById('content-area'))
document.getElementById('content-area').innerHTML = 'You clicked outside.';
else
document.getElementById('content-area').innerHTML = 'Display Contents';
http://jsfiddle.net/DUhP6/2/
Vincule el onClick-Event a un elemento que esté fuera de su área de contenido, por ejemplo, el cuerpo. Luego, dentro del evento, verifique si el objetivo es el área de contenido o un hijo directo o indirecto del área de contenido. Si no, entonces alerta.
Hice una función que verifica si es un niño o no. Vuelve true si el padre de un nodo es el padre buscado. Si no, comprueba si realmente tiene un padre. Si no, vuelve false. Si tiene un padre, pero no es el buscado, verifica si el padre del padre es el padre buscado.
function isChildOf(child, parent)
if (child.parentNode === parent)
return true;
else if (child.parentNode === null)
return false;
else
return isChildOf(child.parentNode, parent);
¡Vea también el ejemplo en vivo (área de contenido = gris)!
El método Node.contains() devuelve un valor booleano que indica si un nodo es descendiente de un nodo determinado o no.
Puedes capturar eventos usando
document.addEventListener("click", clickOutside, false);
function clickOutside(e)
const inside = document.getElementById('content-area').contains(e.target);
Recuerda quitar el evento escuchado en el lugar correcto
document.removeEventListener("click", clickOutside, false)