Fire event only when clicking on an element, and not on its children

If I bind a click handler to the body element, when I click anything on the page the event is triggered. I can check the event.target on every click:

$("body").on("click", function(event) {
  if (event.target.tagName == "BODY") {
    ...
  }
});

but that seem a bit overkill. Is there a way to trigger the event only when clicking the blank area of the body itself?

Answer

You can use the eventPhase property of event. A value of 2 means that the event is currently triggering the target element:

$("body").on("click", function(event) {
    //Cancel if not at target
    if (event.eventPhase != 2) return;

    //Other Code Here
});

Fiddle Here: http://jsfiddle.net/o0yptmmp/