StopPropgation, olayın yakalama aşamasında yayılmasını durdurur mu?

Question

Ben http://www.quirksmode.org/js/events_order.html bakıyordu ve bu bölümde belirsiz:

Eğer true için etkinliğin cancelBubble özelliğini ayarlamanız gerekir Microsoft modelinde. Etkinliğin stopPropagation() yöntemini çağırmanız gerekir W3C modelinde

window.event.cancelBubble = true 

.

e.stopPropagation() 

Bu

köpürme aşamasına etkinliğin tüm yayılma durur.

Yani benim soru:

• bir olay dinleyicisi otomatik iç elemanlarına çoğaltım devam etmez, yakalama aşamasında dinlemek için ayarlandığında?
• Ya da yayılmaya devam ederse, e.stopPropagation() numaralı telefonu arıyor mu, yoksa yalnızca kabarcık aşaması için mi çalışıyor?

Answer 1

Hayır, bir olay dinleyicisi, açıkça anlatılmadıkça, herhangi bir olayın yayılmasını durdurmaz. Özellikle kabarcık aşamasıyla ilgili olarak atıfta bulunduğunuz bölüm. IE'nin modeli etkinlik yakalamayı desteklemiyor - tam durma. denilen görmesini yakalanan olay işleyicisi durmayacak

Top of the DOM --->event--->traverses--->to--->[target]+[event]-| (capture phase) 
     /\              \/ 
     |------------------------to--------back up----------------- (bubble up) 

Answer 2

stopPropagation(): Yakalama aşaması fokurdayan aşamasını önce gelen şeydir. stopPropagation(), köpüren olay işleyicisinin çağrılmasını engeller.

var outputDiv = document.getElementById('output'); 
 

 
function log(msg) { 
 
    outputDiv.insertAdjacentHTML('afterend', msg + '<br>'); 
 
} 
 

 
///////////////////// 
 
//Bubbling listeners 
 
///////////////////// 
 
document.getElementById('row1').addEventListener('click', function(e) { 
 
    log('Bubbling row1 listener called'); 
 
    e.stopPropagation(); 
 
}, false); 
 

 
document.getElementById('row2').addEventListener('click', function(e) { 
 
    log('Bubbling row2 listener called'); 
 
    //NO stopPropagation on this one. 
 
}, false); 
 

 
document.getElementById('table').addEventListener('click', function() { 
 
    log('Bubbling table listener called'); 
 
}, false); 
 

 

 
document.addEventListener('click', function() { 
 
    log('Bubbling document listener called'); 
 
}, false); 
 

 
///////////////////// 
 
//Capturing listeners 
 
///////////////////// 
 
document.addEventListener('click', function() { 
 
    log('Capturing document listener called'); 
 
}, true); 
 

 
document.getElementById('table').addEventListener('click', function() { 
 
    log('Capturing table listener called'); 
 
}, true);

#outputwrapper { 
 
    border: 1px solid black; 
 
    height: 300px; 
 
    overflow: scroll; 
 
}

<table id="table" border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <td id="row1"> 
 
     This row has stopPropagation 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td id="row2"> 
 
     This row does not have stopPropagation 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br>Output 
 
<br> 
 
<div id="outputwrapper"> 
 
    <div id="output"></div> 
 
</div>

Jsfiddle

Answer 3

Kısa cevap: sırası:

1. Yakalama (aşağı) (yukarı)
2. Hedef
3. Kabarcık. Eğer (true-addEventListener() 'ın 3 argüman ayarlayarak) yakalama aşamasında e.stopPropagation() ararsanız

, o kadar 2 & 3 bunu alamaz, 1 durur.

Eğer 1 & 2 zaten tamamlandı (addEventListener() 'ın 3 argümanfalse veya sadece atanmaz ayarlayarak) kabarcık fazında e.stopPropagation() diyoruz, yani sadece kabardığını gelen olay önlerse stopPropagation()'u aradığınız seviyeden.

Answer 4

olay.stopPropagation() - Varsayılan tarayıcı eylemlerini durdurmaz (örneğin: 'a' etiketine tıkladığınızda geçiş).

Onları durduramayacaksanız, event.preventDefault() yöntemini kullanmalısınız. Babble ve yakalama olay türleri ile çalışacaktır. boşboğazlık olay türüyle

Örnek:

<a href="/" onclick="event.preventDefault()">Click here</a>

"a" ya teslim "düğmesi" etiketi, "form" en etiketine çalıştırıldı olayla ilgili eylemlerin her türlü devre dışı bırakmak için, vb kullanmalısınız:

ClickEventHandler(event){ 
    event = event || window.event; 
    event.preventDefault(); 
    event.stopPropagation ? event.stopPropagation() : event.cancelBubble=true; 
} 

varsayılan tarayıcı eylemlerle ilgili olmayan olayın başkaları türleri için. Event.stopPropagation() öğesini kullanmalısınız. Her iki olay türü ile çalışır.