Jaka jest różnica między cancelBubble a stopPropagation?

Question

Czy każdy może mi powiedzieć różnica w korzystaniu z metod cancelBubble i stopPropagation stosowanych w javascript.

Answer 1

cancelBubble jest tylko IE właściwość logiczna (nie sposób), który służy do tego samego celu co w sposób stopPropagation() innych przeglądarki, które ma zapobiec zdarzenia z przejściem do następnej tarczy (znany jako „bąbelkujące”, gdy zdarzenie podróżuje od elementów wewnętrznych do zewnętrznych, co jest jedynym sposobem, w jaki wydarzenie odbywa się w IE < 9). IE 9 obsługuje teraz stopPropagation(), więc cancelBubble ostatecznie stanie się przestarzałe. W międzyczasie, po to funkcja cross-browser, aby zatrzymać rozmnożeniowego zdarzeń:

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

W funkcji obsługi zdarzeń, można go używać w następujący sposób:

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

Answer 2

Dla kompatybilności z IE8 i starszy użycie .cancelBubble jeśli .stopPropogation() jest niezdefiniowane:

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

przeczytać w MSDN: http://msdn.microsoft.com/en-us/library/ff975961%28v=vs.85%29.aspx

Answer 3

Kolejną różnicą, którą ktoś opisał jest to, że e.cancelBubble zatrzymuje propagację zdarzeń dla dalszych elementów tylko w fazie propagacji (gdy zdarzenie osiągnie pierwszy element propagacji), podczas gdy .preventDefault() zapobiega propagacji zarówno w fazie przechwytywania, jak i propagacji (natychmiast dla kolejnego elementu w propagacja).

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>