Home » HTML DOM » Event » stopPropagation()

Monday, December 31, 2012

stopPropagation()

Metode Event.stopPropagation() menghentikan event ini untuk bubbles up di dalam DOM hierarchy.

Sintaks:

Event.stopPropagation()

Contoh di bawah ini ketika pengguna mengklik tombol 'Tombol 1', maka event 'click' (ONCLICK) tidak diperbolehkan untuk bubbles up:

<HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function StopPropagation(event) { if(event.bubbles) { event.stopPropagation(); alert("Bubbles up dihentikan!"); } } </SCRIPT> </HEAD> <BODY ONCLICK="alert(this.tagName)"> <DIV ONCLICK="alert(this.tagName)">DIV Area...<BR> <BUTTON ONCLICK="alert(this.innerHTML)">Tombol 2</BUTTON><BR> <BUTTON ONCLICK="StopPropagation(event)">Tombol 1</BUTTON> </DIV> </BODY> </HTML>

Untuk menguji apakah suatu event dapat bubbles up atau tidak di dalam DOM hierarchy, gunakan properti Event.bubbles, dan ketika event itu dapat bubbles up, gunakan metode Event.stopPropagation() atau properti Event.cancelBubble untuk menghentikannya proses bubbles upnya.

Gunakan metode Event.stopPropagation() di Firefox, Opera, Google Chrome, IE9, dan Safari, karena properti Event.cancelBubble di protes oleh browser-browser tersebut.

Tambahan: Untuk IE sebelum versi 9, gunakan properti Event.cancelBubble untuk fungsi yang sama.

Posted by at