Cancel click event in the mouseup event handler

by

Use the event capture phase

Put an element around the element you want to cancel the click event for, and add a capture event handler to it.

var btnElm = document.querySelector('button');

btnElm.addEventListener('mouseup', function(e){
    console.log('mouseup');
    
    window.addEventListener(
        'click',
        captureClick,
        true // <-- This registeres this listener for the capture
             //     phase instead of the bubbling phase!
    ); 
});

btnElm.addEventListener('click', function(e){
    console.log('click');
});

function captureClick(e) {
    e.stopPropagation(); // Stop the click from being propagated.
    console.log('click captured');
    window.removeEventListener('click', captureClick, true); // cleanup
}
<button>Test capture click event</button>

JSFiddle Demo

What happens:

Before the click event on the button is triggered the click event on the surrounding div gets fired because it registered itself for the capture phase instead of the bubbling phase.

The captureClick handler then stops the propagation of it’s click event and prevents the click handler on the button to be called. Exactly what you wanted. It then removes itself for cleanup.

Capturing vs. Bubbling:

The capture phase is called from the DOM root up to the leafs while the bubbling phase is from the leafs up the root (see: wonderful explanation of event order).

jQuery always adds events to the bubbling phase that’s why we need to use pure JS here to add our capture event specifically to the capture phase.

Keep in mind, that IE introduced the W3C’s event capturing model with IE9 so this won’t work with IE < 9.

With the current Event API you can’t add a new event handler to a DOM Element before another one that was already added. There’s no priority parameter and there’s no safe cross-browser solution to modify the list of event listeners.

More Related Contents:

  1. jQuery click events firing multiple times
  2. How to stop default link click behavior with jQuery
  3. jQuery .on() method doesn’t see new elements
  4. Direct vs. Delegated – jQuery .on()
  5. How to distinguish between left and right mouse click with jQuery
  6. jQuery $(document).ready and UpdatePanels?
  7. How to debug JavaScript / jQuery event bindings with Firebug or similar tools?
  8. Can I find events bound on an element with jQuery?
  9. How can I detect pressing Enter on the keyboard using jQuery?
  10. What is the difference between the mouseover and mouseenter events?
  11. How to fire an event on class change using jQuery?
  12. Long Press in JavaScript?
  13. $(document).click() not working correctly on iPhone. jquery [duplicate]
  14. jQuery scroll() detect when user stops scrolling
  15. Why is this jQuery click function not working?
  16. Alternative to jQuery’s .toggle() method that supports eventData?
  17. How to stop events bubbling in jQuery? [duplicate]
  18. Attaching click event to a JQuery object not yet added to the DOM [duplicate]
  19. jQuery: keyup event for mobile device
  20. jQuery event delegation
  21. Open Select using Javascript/jQuery?
  22. JavaScript: Invoking click-event of an anchor tag from javascript
  23. How do I handle a click anywhere in the page, even when a certain element stops the propagation?
  24. jQuery $(document).ready () fires twice
  25. Fullscreen API: Which events are fired?
  26. Registering jQuery click, first and second click
  27. Bind events on dynamic created elements inserted by AJAX (check box)
  28. Programmatical click on -tag not working in Firefox
  29. Why isn’t my checkbox change event triggered?
  30. jQuery event bubbling

Leave a Comment