Phương thức stopPropagation() của Event trong HTML DOM

Phương thức stopPropagation() của Event trong HTML DOM dùng để ngăn chặn lan truyền (propagation) của sự kiện. Nghĩa là click vào phần tử cha không lan truyền đến con, và click vào con không lan truyền đến cha khi dùng stopPropagation(). Lan truyền sự kiện còn gọi là event bubbling.

Cú pháp

Cú pháp cho phương thức stopPropagation():

event.stopPropagation()

Ví dụ

Ví dụ minh họa cho phương thức stopPropagation():

<!DOCTYPE html> <html> <head> 
<style> 
    #DIV_1 { background: lightpink; width:130px; height:130px; margin-left:40%; text-align:center; } 
    #IMG_1 { width:100px; height:100px; position:relative; left:5px; } 
</style> </head> <body> 
<h1>Ví dụ phương thức stopPropagation()</h1> 
<div id="DIV_1" onclick="OuterDiv()"> 
    PHẦN TỬ DIV 
    <img onclick="InnerImg(event)" id="IMG_1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg"> 
</div> 
Ngăn chặn lan truyền: <input type="checkbox" id="check"> 
<script> 
    function InnerImg(event) { 
        confirm("Ảnh bên trong được click"); 
        if (document.getElementById("check").checked) { 
            event.stopPropagation(); 
        } 
    } 
    function OuterDiv() { 
        confirm("Div bên ngoài được click"); 
    } 
</script> </body> </html>

Kết quả

Không check checkbox: click ảnh → hiện "Ảnh bên trong được click" → OK → hiện "Div bên ngoài được click" (bubbling).

Check checkbox: click ảnh → chỉ hiện "Ảnh bên trong được click", không lan truyền đến div cha.