¿Cómo responder a un clic fuera de un área determinada?

Question

Mi documento tiene el siguiente aspecto:

Básicamente el fondo es de una sola pantalla completa, div transparente. Hay un par de problemas ... si solo creo el fondo div y no le aplique ningún z-index, termina estando encima de todo, y no puedo hacer clic en el cuadro. Si configuro el índice z del div de fondo para que esté debajo del cuadro, parece que no puedo hacer clic en el fondo. Lo que quiero hacer es poder hacer clic tanto en el cuadro como en el fondo.

var x = document.getElementById("bg"); 
x.addEventListener("click",reset,false); 

function reset() { 
    alert("reset was clicked"); 
} 

ACLARACIÓN: la casilla está en el mismo nivel de nodo que el bg. no está dentro del bg div.

Answer 1

Debe publicar su código por lo que cada uno puede ayudar. Mi test funciona correctamente en Firefox y Chrome. Si estoy acertando, el fondo de tu código no está expandido. Intente eliminar html, body { width:100%; height:100%; } en mi ejemplo para ver el problema.

En el navegador IE, debe utilizar una imagen gif transparente como fondo de la div de fondo, de lo contrario, la div de fondo no podrá recibir el evento de clic del mouse.

Answer 2

Eche un vistazo a este plugin de jQuery, incluso si no resuelve su pregunta en particular, el código podría proporcionar una idea de su dilema.

jQuery clickoutside