<!DOCTYPE html>
<html>
<body>
<style>
div { padding: 50px;
background-color: rgba(255, 0, 0, 0.2);
text-align: center;
cursor: pointer;
}
</style>
<h1>stopPropagation() 方法</h1>
<p>点击 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>stopPropagation() 方法允许您阻止当前事件的传播。</p>
<script>
function func1(event) { alert("DIV 1"); if (document.getElementById("check").checked) { event.stopPropagation();
}
}
function func2() { alert("DIV 2");}
</script>
</body>
</html>