Quelle est la différence entre cancelBubble et stopPropagation ?

Question

Quelqu'un peut-il me dire quelle est la différence d'utilisation entre cancelBubble y stopPropagation utilisées en Javascript.

Answer 1

cancelBubble est une propriété booléenne (et non une méthode) réservée à IE, qui remplit la même fonction que l'option stopPropagation() d'autres navigateurs, qui consiste à empêcher l'événement de se déplacer vers sa cible suivante (ce que l'on appelle le "bullage" lorsque l'événement se déplace d'éléments internes vers des éléments externes, ce qui est la seule façon dont un événement se déplace dans IE < 9). IE 9 prend désormais en charge stopPropagation() donc cancelBubble deviendra éventuellement obsolète. En attendant, voici une fonction multi-navigateurs permettant d'arrêter la propagation d'un événement :

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

Dans une fonction de traitement d'événement, vous pouvez l'utiliser comme suit :

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

Answer 2

Pour la compatibilité avec IE8 et les versions antérieures, utilisez .cancelBubble si .stopPropogation() est indéfinie :

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

Lire à ce sujet dans MSDN : http://msdn.microsoft.com/en-us/library/ff975961%28v=vs.85%29.aspx

Answer 3

Une autre différence que quelqu'un a décrite est que e.cancelBubble arrête la propagation de l'événement pour les autres éléments uniquement dans la phase de bouillonnement (lorsque l'événement atteint le premier élément de bouillonnement), alors que .preventDefault() empêcher la propagation tant en phase de capture qu'en phase de bullage (immédiatement pour l'élément suivant dans la 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>