Detect click on "empty" area

Question

Let's say we have next html/css: http://jsfiddle.net/rbDKm/2/

<div id="header">header</div>
<div id="content">
    <div class="actions">
        <div class="actions-row">
            <div class="action ">home</div>
            <div class="action ">search</div>
            <div class="action ">settings</div>
        </div>
        <div class="actions-row">
            <div class="action">...</div>
            <div class="action">...</div>
            <div class="action">...</div>
        </div>
    </div>
</div>
<div id="footer">footer</div>

What I need is to detect any clicks, which were made on an "empty" area. In provided fiddle, empty area would be everything, which has white or orange color.

Is there any technique/approach for doing this?

Answer 1

With your markup as you have it now, I think that means you need to detect clicks outside of any div.action, #header or #footer.

To do that, you hook click on body, and then look at the path it took to get to body:

document.body.addEventListener("click", function(e) {
    var elm = e.target;
    while (elm !== document.body) {
        if (elm.id === "header" || elm.id === "footer") {
            return;
        }
        if (elm.tagName.toUpperCase() === "DIV" && /(?:^| )action(?:$| )/.test(elm.className)) {
            return;
        }
        elm = elm.parentNode;
    }
    // If we got here, it's on one of the desired areas
});

There are a couple of variations on that you could do. For instance, instead of className.match you could use classList on modern browsers. And modern browsers also offer Element#closest which you could use instead of the loop.

Alternately, you hook click on body and hook click on the relevant other elements and prevent the click from propagating:

function stopTheEvent(e) {
    e.stopPropagation();
}
document.body.addEventListener("click", function(e) {
    // It's one of the desired areas
});
var list = document.querySelectorAll("#header, #footer, div.action");
var index;
for (index = 0; index < list.length; ++index) {
    list[index].addEventListener("click", stopTheEvent);
}

...but that seems messier.

---

Note: In the above, I haven't allowed for IE8's lack of addEventListener. If you need to support IE8, look at attachEvent("onclick", ...) and use window.event.returnValue = false; to stop propagation (or use a library that abstracts these things away).

Answer 2

Use the "target" of the event, and check it's class/id

http://jsfiddle.net/yryQ6/

When you bind the click event, use the event, get the target and ask for it's class:

$('#content').on('click',function(e){
  if ($(e.target).hasClass('action')) {
    // click on an action
  } else {
    // click on smething that's not an action, in this case, action-row o actions, your empty area
  }
}

EDIT: assuming you use jquery, you should be able to use something similar with javascript events