What’s the difference between cancelBubble and stopPropagation?

by

cancelBubble is an IE-only Boolean property (not method) that serves the same purpose as the stopPropagation() method of other browsers, which is to prevent the event from moving to its next target (known as “bubbling” when the event is travelling from inner to outer elements, which is the only way an event travels in IE < 9). IE 9 now supports stopPropagation() so cancelBubble will eventually become obsolete. In the meantime, the following is a cross-browser function to stop an event propagating:

function stopPropagation(evt) {
    if (typeof evt.stopPropagation == "function") {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
}

In an event handler function, you could use it as follows:

document.getElementById("foo").onclick = function(evt) {
    evt = evt || window.event; // For IE
    stopPropagation(evt);
};

More Related Contents:

  1. event.preventDefault() vs. return false
  2. What is DOM Event delegation?
  3. What is event bubbling and capturing?
  4. How can I trigger a JavaScript event click
  5. The value of “this” within the handler using addEventListener
  6. What exactly is the parameter e (event) and why pass it to JavaScript functions?
  7. How to get a word under cursor using JavaScript?
  8. Intercept page exit event
  9. Listening for variable changes in JavaScript
  10. How can I get the destination URL for the onbeforeunload event?
  11. How to check whether dynamically attached event listener exists or not?
  12. Reading client side text file using Javascript
  13. Accessing an object’s property from an event listener call in JavaScript
  14. Enter key press behaves like a Tab in Javascript
  15. Detect mousemove when over an iframe?
  16. How to delay calling of javascript function?
  17. How to detect in iOS webapp when switching back to Safari from background?
  18. link element onload
  19. Do Javascript promises block the stack
  20. Remove key press delay in Javascript
  21. cloning javascript event object
  22. JavaScript KeyCode Values are “undefined” in Internet Explorer 8
  23. Call a Javascript function every 5 seconds continuously [duplicate]
  24. How to listen for child window closing?
  25. How browser executes Javascript and renders asynchronously
  26. How to optimize website for touch devices
  27. Prevent click event from firing when dblclick event fires
  28. How do you force your Javascript event to run first, regardless of the order in which the events were added?
  29. Are dynamically inserted tags meant to work?
  30. Display Spreadsheet Data to HTML Table

Leave a Comment