Может кто-нибудь скажет мне разницу в использовании методов cancelBubble
и stopPropagation
, используемых в javascript.
Какая разница между cancelBubble и stopPropagation?
Ответ 1
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);
};
Ответ 2
Для совместимости с IE8 и старше используйте .cancelBubble
, если .stopPropogation()
- undefined:
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
Ответ 3
Другое отличие, которое кто-либо описал, заключается в том, что 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>