本文详解为何直接对 设置 pointer-events: none 后再对子元素设 pointer-events: auto 仍会触发链接跳转，并提供真正有效的 CSS + HTML 解决方案。
本文详解为何直接对 ` ⚠️ 但此方案无效 —— 尽管父级 被设为 pointer-events: none，一旦任意子元素设置了 pointer-events: auto，鼠标事件将正常触发该子元素，且事件冒泡仍会激活父 的默认行为（如跳转）。根据 mdn 官方文档 明确说明： If one of the element's children has pointer-events explicitly set to allow that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. 即：pointer-events 控制的是「事件是否能到达目标元素」，而非「是否阻止事件传播」；它不阻断冒泡，也不抑制 的原生导航行为。 ✅ 正确解法：剥离语义与行为，用语义化替代方案重构 最健壮、可维护的方式是避免让无功能的 承担容器职责。推荐以下两种专业实践： 当链接无实际 href 或不应导航时，语义上本就不应使用 。改用 ✅ 优势：语义正确、无障碍友好（配合 role="link" 和 tabindex）、无跳转风险、CSS 更可控。 若必须保留 （如 SEO 需求或 SSR 兼容），则应： ⚠️ 注意：@click.stop（Vue）或 event.stopPropagation()（原生 JS）仅阻止事件冒泡，不阻止默认行为，因此必须搭配 @click.prevent 或 event.preventDefault() 抑制跳转。.no-link {
pointer-events: none;
}
.interactive-child {
pointer-events: auto;
}方案一：用
<div class="link-container" role="link" tabindex="0">
<figure class="interactive-child" @click="handleFigureClick">...</figure>
<span class="interactive-child" @click="handleSpanClick">点击我</span>
</div>
.link-container {
/* 可选：视觉上模拟链接 */
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0066cc;
text-decoration: underline;
cursor: pointer;
}
.link-container:focus {
outline: 2px solid https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0066cc;
outline-offset: 2px;
}
.interactive-child {
pointer-events: auto; /* 默认即 auto，可省略 */
}方案二：保留 ，但动态控制 href 与事件（适用于需保留 SEO/语义场景）
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="conditional-link" @click.prevent>
<figure @click.stop="handleFigureClick">...</figure>
<span @click.stop="handleSpanClick">点击我</span>
</a>
.conditional-link {
/* 不依赖 pointer-events 控制，避免冒泡陷阱 */
cursor: default;
}
.conditional-link:active {
opacity: 0.8;
}总结与最佳实践
