在嵌套 div 中，点击最内层元素会触发所有父级的 click 事件（事件冒泡），导致多个 alert 弹出；只需在目标元素的事件处理中调用 event.stopPropagation() 即可阻止事件向上传播，确保仅执行当前层级的响应逻辑。
在嵌套 div 中，点击最内层元素会触发所有父级的 click 事件（事件冒泡），导致多个 alert 弹出；只需在目标元素的事件处理中调用 `event.stoppropagation()` 即可阻止事件向上传播，确保仅执行当前层级的响应逻辑。
HTML 中的事件默认遵循“捕获 → 目标 → 冒泡”三阶段，而 click 事件在冒泡阶段由子元素向父元素逐层传递。因此，当最内层 <div> 被点击时，其 click 事件会依次触发自身、中间层、最外层的监听器——这就是多个 alert 连续弹出的根本原因。<p>解决方法是<strong>在需要独占响应的子元素上显式阻止冒泡</strong>。推荐使用 <code>event.stopPropagation()（兼容现代浏览器及 IE9+），它能立即终止事件在 DOM 树中的向上冒泡过程，不影响当前元素的默认行为或事件处理。
以下为优化后的完整示例（语义清晰、结构可控、易于维护）：
<div class="container" onclick="handleClick('First div')">
First Div
<div class="level-2" onclick="handleClick('Second div'); event.stopPropagation();">
Second Div
<div class="level-3" onclick="handleClick('Third div'); event.stopPropagation();">
Third Div
</div>
</div>
</div>
<script>
function handleClick(message) {
alert(message);
}
</script>
✅ 关键说明：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
- 外层
div无需阻止冒泡（保留默认行为），适合作为兜底响应区域； - 中间层与最内层均添加
event.stopPropagation()，确保点击时不触发上级 handler； - 使用独立函数
handleClick()提升可读性与复用性，避免内联脚本冗余； - 若需更精细控制（如区分点击目标、支持键盘触发），建议改用
addEventListener并统一绑定，配合event.target判断实际触发元素。
⚠️ 注意事项：
- 不要混淆
stopPropagation()与preventDefault()：前者阻止事件传播，后者阻止默认行为（如表单提交、链接跳转），此处无需后者； - 若后续需在捕获阶段监听（极少数场景），应将第三个参数设为
true，但本例中冒泡阶段处理已足够； - 在 Vue/React 等框架中，应使用
@click.stop或onClick={(e) => { e.stopPropagation(); ... }}实现相同效果，原理一致。
通过合理运用事件流控制机制，即可精准定位用户交互意图，构建响应明确、逻辑健壮的嵌套交互结构。
