В чем разница между cancelBubble и stopPropagation?

cancelBubble - это булево свойство только для IE (не метод), которое служит той же цели, что и метод stopPropagation() других браузеров, то есть предотвращает перемещение события к его следующей цели (известной как «всплывающее» когда событие проходит от внутренних к внешним элементам, это единственный путь, которым событие проходит в IE < 9). IE 9 теперь поддерживает stopPropagation(), поэтому cancelBubble со временем устареет. Между тем, кросс-браузерная функция для остановки распространения события:

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

В функции обработчика событий вы можете использовать ее следующим образом:

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

Для совместимости с IE8 и более ранними версиями используйте .cancelBubble, если .stopPropogation() не определено:

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

Читайте в MSDN: http://msdn.microsoft.com/en-us /library/ff975961%28v=vs.85%29.aspx

Другое отличие, которое кто-либо описал, заключается в том, что e.cancelBubble останавливает распространение события для других элементов только в фазе пузырьков (когда событие достигает первого пузырькового элемента), тогда как .preventDefault() предотвращает распространение как в фазе захвата, так и в фазе пузырьков (непосредственно следующий элемент в распространении).

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>