stopPropagation() 事件方法
JavaScript基础 2022-06-08 12:06:58小码哥的IT人生shichen
stopPropagation() 事件方法
实例
防止同一事件的任何传播：
function func1(event) {
alert("DIV 1");
event.stopPropagation();
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<style>
div {
padding: 50px;
background-color: rgba(255, 0, 0, 0.2);
text-align: center;
cursor: pointer;
}
</style>
<h1>The stopPropagation() Method</h1>
<p>Click DIV 1:</p>
<div onclick="func2()">DIV 2
<div onclick="func1(event)">DIV 1</div>
</div>
Stop propagation:
<input type="checkbox" id="check">
<p></p>
<p>因为 DIV 1 位于 Div 2 内，所以当您单击 DIV 1 时，两个 DIV 都会被单击。</p>
<p>选中这个停止传播复选框，然后重试。</p>
<p>stopPropagation() 方法允许您阻止当前事件的传播。</p>
<script>
function func1(event) {
alert("DIV 1");
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function func2() {
alert("DIV 2");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
stopPropagation() 方法防止调用相同事件的传播。
传播意味着向上冒泡到父元素或向下捕获到子元素。
浏览器支持
表格中的数字注明了完全支持该方法的首个浏览器版本。
| 方法 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| stopPropagation() | 支持 | 9.0 | 支持 | 支持 | 支持 |
语法
event.stopPropagation()
参数
无
技术细节
| 返回值： | 无返回值 |
|---|---|
| DOM 版本： | DOM Level 3 Events |
