W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <body> <style> div { padding:50px; background-color:rgba(255, 0, 0, 0.2); text-align:center; cursor:pointer; } </style> <h1>cancelBubble 属性</h1> <p>Click DIV 1:</p> <div onclick="func2()">DIV 2 <div onclick="func1(event)">DIV 1</div> </div> 取消冒泡： <input type="checkbox" id="check"> <p></p> <p>因为 DIV 1 在 Div 2 中，所以当您单击 DIV 1 时，两个 DIV 都会被单击。</p> <p>请选中取消冒泡复选框，然后重试。</p> <p>cancelBubble = true 防止事件流冒泡到父元素。</p> <script> function func1(event) { alert("DIV 1"); if (document.getElementById("check").checked) { event.cancelBubble = true; } } function func2() { alert("DIV 2"); } </script> </body> </html>