event.stopPropagation()

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

İlgili Başlıklar