What's the difference between cancelBubble and stopPropagation?

Question

Can anyone please tell me difference in usage of cancelBubble and stopPropagation methods used in Javascript.

Answer 1

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); }; 

Answer 2

For compatibility with IE8 and older use .cancelBubble if .stopPropogation() is undefined:

if(ev.stopPropagation)ev.stopPropagation(); else ev.cancelBubble=true; // where ev is an event object 

Read about in MSDN: http://msdn.microsoft.com/en-us/library/ff975961%28v=vs.85%29.aspx