Adding an additional click event to every element (JavaScript / jQuery)

Question

I'm developing a touchscreen application that, aside from everything else, records the amount of times the screen is used so that the user can be reminded to clean the screen after a predefined number of clicks.

I've got the click functions written nicely, all I need now is make sure the function is called on a click.

I imagine $('*').click(function() { //do something }); would accomplish my goal, but is that the best way? Also, would that overwrite other click functions assigned to the elements?

Answer 1

It would add, not override, but a better solution would be this:

$(document).click(function() { 
  //do something
});

Since clicks bubble, just listen up at the document level with one event instead of creating events on every element beneath. For the override part...you can add as many handlers as you want, they will just execute in the order they were bound.

Answer 2

The best way is to assign the event handler to document itself. The events bubble and document can catch them all, while still retaining the origin of the event.