Global jQuery `.click()`

Question

I would like to fire an event when anything on the page is clicked, and then process normally. For example a click would be fired, I would see if the target matched something, alert if it did, and then have the click event continue (no preventDefault()).

Answer 1

$(document).click(function(e) {
    // e.target is the element which has been clicked.
});

This will handle all click events unless a handler prevents the event from bubbling up (by calling the stopPropagation() method of the event object).

Answer 2

$("body").click(function (event) {
// Your stuff here
}

Answer 3

This is called Event Delegation. It's pretty cool:

http://www.sitepoint.com/blogs/2008/07/23/javascript-event-delegation-is-easier-than-you-think/

Answer 4

3 options for you:

This is how .live() in jquery works. Everything bubbles to the top, and it matches the selector you set. http://api.jquery.com/live/

A more efficient way to do it is using .delegate, or providing a context to .live() so you don't have to bubble to the top. http://api.jquery.com/delegate/

If you want to do it manually, bind 'click' to the document, and use .closest() to find the closest matching selector: http://api.jquery.com/closest/

It's all the same concept, event delegation as mentioned already.