How to respond to a click outside a certain area?

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

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

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


You must post your code so every one can help you. My test work correctly on Firefox and Chrome. If I'm guessing right, the background in your code isn't expanded. Try to remove html, body { width:100%; height:100%; } in my example to see the problem.

On IE browser, you need to use a transparent gif image as background of the background div, otherwise the background div may be unable to receive mouse click event.

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

Need Your Help

How can I indicate result ambiguity with Resharper CodeAnnotation attributes?

c# resharper code-contracts resharper-8.0 resharper-7.1

Using Resharper's code-annotation attributes, I'm trying to write a ContractAnnotation attribute for a method that will always return null if the input is null, but will return either null or a v...

Cordova WP8 bootstrap glyphicon not showing

cordova windows-phone-8

Do you know, how fixed problem not showing glypicon in app on WP8 usign cordova ?