What's the difference between cancelBubble and stopPropagation?

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

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

Solution 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

Solution 3:

Another difference that anyone has described is that e.cancelBubble stops event propagation for the further elements only in bubbling phase (when event reaches the first bubbling element), while .preventDefault() prevent propagation both in capturing and bubbling phase (immediately for the next element in propagation).

var a = document.getElementById('a');
var b = document.getElementById('b');
var c = document.getElementById('c');
var d = document.getElementById('d');

a.addEventListener('click',cancel,true);
b.addEventListener('click',cancel,true);
c.addEventListener('click',cancel,false);
d.addEventListener('click',cancel,false);


function cancel(event){
  var logElem = event.currentTarget.id;
  console.log(logElem);
  if(logElem==='a') event.cancelBubble = true;
  
}


var e = document.getElementById('e');
var f = document.getElementById('f');
var g = document.getElementById('g');
var h = document.getElementById('h');

e.addEventListener('click',stop,true);
f.addEventListener('click',stop,true);
g.addEventListener('click',stop,false);
h.addEventListener('click',stop,false);


function stop(event){
  var logElem = event.currentTarget.id;
  console.log(logElem);
  if(logElem==='e') event.stopPropagation();
  
}

#a,#b,#c,#d,#e,#f,#g,#h{
  box-sizing:border-box;
  width:100%;
  height:90%;
  border:solid 1px #33aaff;
  padding:10px;
  padding-top:0px;
  cursor:pointer;
}

#a,#e{
  width:200px;
  height:200px;

}

<h3>cancelBubble</h3>
<div id='a'>a capturing
  <div id='b'>b capturing
    <div id='c'>c bubbling
      <div id='d'>d bubbling
      </div>
    </div>
  </div>
</div>

<h3>stopPropagation</h3>
<div id='e'>e capturing
  <div id='f'>f capturing
    <div id='g'>g bubbling
      <div id='h'>h bubbling
      </div>
    </div>
  </div>
</div>