How to respond to a click outside a certain area?

Question

My document looks like this:

Basically the background is one full-screen, transparent div. There are couple problems...if I just create the background div and don't apply any z-index to it, it ends up being on top of everything, and I cannot click on the box. If I set the z-index of the background div to be below the box, I can't seem to click on the background. What I want to do, it to be able to click both on the box, and the background.

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

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

CLARIFICATION: box is on the same node level as the bg. it is not inside the bg div.

Answer 1

Take a look at this jQuery plugin - even if it doesn't solve your particular question the code could provide insight into your dilemma.

jQuery clickoutside