event.stopPropagation() metodu, olay akışının durdurulmasını sağlar. Eğer sadece bir element için belirli bir Olayın engellenmesi isteniyorsa bunun için event.preventDefault() metodu kullanılabilir.
Sözdizimi
event.stopPropagation()
Aşağıdaki örnek, TR, TD ve DIV elementleri arasındaki olay akışını ve bu olay akışının, en içteki DIV elementinde event.stopPropagation metodu ile kesilmesini göstermektedir.
<style type="text/css">
#ornekDiv
{
width:120px;
height:90px;
background-color:#bb0000;
color:white;
}
</style>
<input type="button" value="Yayılmayı Engelle" onClick="engelle()"/>
<input type="button" value="Yayılmaya İzin Ver" onClick="izinVer()"/>
<table id="ornekTable">
<tr id="ornekTr">
<td id="ornekTd">
<div id="ornekDiv"/>
</td>
</tr>
</table>
<script type="text/javascript">
var ornekDiv = document.getElementById('ornekDiv');
var ornekTr = document.getElementById('ornekTr');
var ornekTd = document.getElementById('ornekTd');
ornekTr.addEventListener('mousedown',mesajYaz,false); // Dönüş
ornekTr.addEventListener('mousedown',mesajYaz,true); // Yakalama
ornekTd.addEventListener('mousedown',mesajYaz,false); // Dönüş
ornekTd.addEventListener('mousedown',mesajYaz,true); // Yakalama
ornekDiv.addEventListener('mousedown',mesajYaz,false); // Dönüş
function mesajVer(olay) {
return "Güncel Hedef : " + olay.currentTarget.id +
"\nHedef : " + olay.target.id;
}
function mesajYaz(event) {
alert( mesajVer(event) );
}
function olayiDurdur(event) {
event.stopPropagation();
alert("Olay akışı burada engellendi.\n" +
"-----------------------------\n" +
mesajVer(event));
}
function engelle() {
ornekDiv.addEventListener('mousedown',olayiDurdur,true);
}
function izinVer() {
ornekDiv.removeEventListener('mousedown',olayiDurdur,true);
}
</script>
-> TR -> TD -> DIV
|
<- TR <- TD <- DIV
Test Edin