Question

The question is simply between

$("body").click(function(e){}); vs $(document).click(function(e){});

which is more efficient or advisable? Or does it depend on the situation?

Honestly I have used them both interchangeably and haven’t seen any differences until I got curious and asked this question here.

Answer 1

If the page height is smaller than the viewport height, then clicking on the viewport below the page will not trigger the 'body' click handler, but only the document click handler.

Live demo: http://jsfiddle.net/simevidas/ZVgDC/

In the demo, try clicking on the area below the text, and you will see that only the document click handler executes.

Therefore, it is better to bind the handler to the Document object.