Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <body> <style> div { padding:50px; background-color:rgba(255, 0, 0, 0.2); text-align:center; cursor:pointer; } </style> <h1>The cancelBubble Property</h1> <p>Click DIV 1:</p> <div onclick="func2()">DIV 2 <div onclick="func1(event)">DIV 1</div> </div> Cancel bubble: <input type="checkbox" id="check"> <p></p> <p>Because DIV 1 is inside Div 2, both DIVs get clicked when you click on DIV 1.</p> <p>Check the cancel bubble checkbox, and try again.</p> <p>The cancelBubble = true prevents the event flow from bubbling up to parent elements.</p> <script> function func1(event) { alert("DIV 1"); if (document.getElementById("check").checked) { event.cancelBubble = true; } } function func2() { alert("DIV 2"); } </script> </body> </html>
