Ocultar elemento al hacer clic fuera

[Alexis88]

Un pequeño ejemplo:

Código HTML:

<button>Mostrar/Ocultar</button>
<div></div>
 

Código CSS:

div{
    width: 20rem;
    height: 15rem;
    background: black;
    display: none;
}
 

Código Javascript:

var div = document.querySelector("div"),
    button = document.querySelector("button");
 
window.addEventListener("click", function(event){
    var objetivo = event.target;
    if (objetivo != div && objetivo != button) div.style.display = "none";
}, false);
 
button.addEventListener("click", function(){
    var visible = getComputedStyle(div).display;
    div.style.display = visible == "block" ? "none" : "block";
}, false);
 

Tenemos una división y un botón. En la hoja de estilos, a la división, le aplico dimensiones, un color de fondo y la oculto. En el código JS, tomo a ambos elementos y los asigno a variables. Luego, cuando demos un clic en alguna parte de la ventana, tomamos el lugar afectado y si este no es la división ni el botón, procedemos a ocultar a la división. Por otra parte, cuando demos clic al botón, tomamos el estilo computado de la división, correspondiente a la propiedad display. Luego, si esta es igual a 'block', le asignamos 'none' a la división, caso contrario, 'block'.

DEMO

Saludos