Javascript event.cancelBubble özelliği, olay akışı sırasında Olay’ın kök elemente dönüp-dönmediğinin öğrenilmesini veya ayarlanmasını sağlar.
Bu özellik yerine stopPropagation() metodu önerilmektedir.
Sözdizimi
vazgec = event.cancelBubble
event.cancelBubble = dursun
dursun true, olay dönüşünün durdurulacağını, false, ise devam ettiğini belirtir.
Dönüş Değeri
vazgec true/false değer alarak, olay akışında olay dönüşünün iptal edilip-edilmediğini ifade eder. Varsayılan değeri false.
cancelBubble özelliği daima false değerini döndürür. Çünkü, olay akışı sırasında varsayılan değeri budur. Bir Olay dinleyici fonksiyonunda, true değeri atanarak, olay akışının kesilmesi durumunda ise ilgili olay için kendinden sonra gelen hiçbir olay dinleyicisinin çalıştırılması söz konusu olamayacağı için bu özelliğin değerinin true/false ile karşılaştırılması da söz konusu olamaz. Bunun yanında sadece, true atanarak olay akışının kesildiği Olay dinleyici fonksiyonunun içinde true döndürebilir.
Aşağıdaki örnek, bir tablo içindeki DIV elementine CTRL tuşu ile tıklandığında, tıklamanın iptalini göstermektedir.
<table id=”ornekTablo”><tr><td>
<div id=”ornekDiv” style=”width:150px; height:100px;
background-color:#44BB55; text-align:center;”>
<b>Tıkla bana!</b>
</div>
</td></tr></table>
<script type=”text/javascript”>
var ornekDiv = document.getElementById(‘ornekDiv’);
var ornekTablo = document.getElementById(‘ornekTablo’);
function bubblingKont(olay)
{
olay = olay || event;
if(olay.ctrlKey)
olay.cancelBubble = true;
}
function tiklandi()
{
olay = olay || event;
if(olay.cancelBubble == true)
{
alert(“Olay Akışı Durdurulmuş!”); // Hiçbir zaman çalışmaz.
}
else
{
alert(“Tabloya Tıklandı!”);
}
}
ornekDiv.onclick = bubblingKont;
ornekTablo.onclick = tiklandi;
</script>