cancelBubble 事件属性
JavaScript基础 2022-06-08 12:04:13小码哥的IT人生shichen
cancelBubble 事件属性
实例
防止当前事件冒泡：
function func1(event) {
alert("DIV 1");
event.cancelBubble = true;
}
完整实例：
<!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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
cancelBubble 属性防止事件流冒泡到父元素。
提示：如需防止向上冒泡到父元素并向下被子元素捕获，请改用 stopPropagation() 方法。
浏览器支持
表中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| cancelBubble | 支持 | 9.0 | 支持 | 支持 | 支持 |
语法
event.cancelBubble = true|false
参数
无。
技术细节
| 返回值： | 无返回值 |
|---|---|
| DOM 版本： | DOM Level 3 Events |
