How do I handle a click anywhere in the page, even when a certain element stops the propagation?

by

Events in modern DOM implementations have two phases, capturing and bubbling. The capturing phase is the first phase, flowing from the defaultView of the document to the event target, followed by the bubbling phase, flowing from the event target back to the defaultView. For more information, see http://www.w3.org/TR/DOM-Level-3-Events/#event-flow.

To handle the capturing phase of an event, you need to set the third argument for addEventListener to true:

document.body.addEventListener('click', fn, true);

Sadly, as Wesley mentioned, the capturing phase of an event cannot be handled reliably, or at all, in older browsers.

One possible solution is to handle the mouseup event instead, since event order for clicks is:

  1. mousedown
  2. mouseup
  3. click

If you can be sure you have no handlers cancelling the mouseup event, then this is one way (and, arguably, a better way) to go. Another thing to note is that many, if not most (if not all), UI menus disappear on mouse down.

More Related Contents:

  1. What is the difference between the mouseover and mouseenter events?
  2. How to stop default link click behavior with jQuery
  3. How can I get jQuery .val() AFTER keypress event?
  4. jQuery event that triggers after CSS is loaded?
  5. Get the clicked object that triggered jquery blur() event [duplicate]
  6. Drop event not firing in chrome
  7. jQuery.click() vs onClick
  8. Check if an image is loaded (no errors) with jQuery
  9. jQuery Event Keypress: Which key was pressed?
  10. Definitive way to trigger keypress events with jQuery
  11. How to order events bound with jQuery
  12. Can I call jQuery’s click() to follow an link if I haven’t bound an event handler to it with bind or click already?
  13. How to detect online/offline event cross-browser?
  14. How do you log all events fired by an element in jQuery?
  15. How to bind Events on Ajax loaded Content?
  16. Event delegation vs direct binding when adding complex elements to a page
  17. Jquery: change event to input file on IE
  18. Preventing click event with jQuery drag and drop
  19. jQuery: How to get the event object in an event handler function without passing it as an argument?
  20. Attach an event in a child iframe to a handler in the parent window
  21. Javascript with jQuery: Click and double click on same element, different effect, one disables the other
  22. Detect Close windows event by jQuery
  23. window.resize event firing in Internet Explorer
  24. jQuery change event on not firing in IE
  25. How to detect if the user clicked the “back” button
  26. Performance difference between jQuery’s .live(‘click’, fn) and .click(fn)
  27. Prevent onclick action with jQuery
  28. Disabling middle click scrolling with javascript
  29. jQuery: How to listen for DOM changes?
  30. addEventListener to iFrame

Leave a Comment