如何禁用容器内特定子元素的<a>标签跳转功能？

这问题我之前做项目时也碰到过，核心就是要让特定子元素的点击事件不触发父级a标签的跳转行为。给你几个实用的方案：

方案一：JavaScript阻止事件默认行为（推荐，不改动原有HTML结构） #

给需要禁用跳转的子元素绑定点击事件，通过preventDefault()阻止a标签的跳转动作，同时用stopPropagation()避免事件冒泡影响其他父元素事件：

<style>
a { text-decoration: none; color: white; }
.container { display: flex; width: 400px; height: 100px; background-color: #ddd; box-sizing: border-box; padding: 5px; }
.block-1 { width: 50%; height: 100%; background-color: #3e3e3e; text-align: center; box-sizing: border-box; padding-top: 20px; }
.block-2 { width: 50%; height: 100%; background-color: red; text-align: center; box-sizing: border-box; padding-top: 20px; }
</style>

<a href="https://example.com">
  <div class="container">
    <div class="block-1">Active</div>
    <div class="block-2">Disabled</div>
  </div>
</a>

<script>
// 获取所有需要禁用跳转的元素，这里用类名选择
document.querySelectorAll('.block-2').forEach(el => {
  el.addEventListener('click', function(e) {
    e.preventDefault(); // 直接阻止a标签的跳转默认行为
    e.stopPropagation(); // 阻止事件向上冒泡，避免触发父元素的其他事件
  });
});
</script>

这样点击红色的Disabled区域时，就不会触发a标签的跳转，而点击Active区域依然正常跳转。

方案二：调整HTML结构（无JS依赖，适合允许修改结构的场景） #

如果你的页面结构允许调整，最简单的方式就是只给需要跳转的子元素包裹a标签，而不是整个容器：

<style>
a { text-decoration: none; color: white; }
.container { display: flex; width: 400px; height: 100px; background-color: #ddd; box-sizing: border-box; padding: 5px; }
.block-1 { width: 50%; height: 100%; background-color: #3e3e3e; text-align: center; box-sizing: border-box; padding-top: 20px; }
.block-2 { width: 50%; height: 100%; background-color: red; text-align: center; box-sizing: border-box; padding-top: 20px; }
</style>

<div class="container">
  <a href="https://example.com"><div class="block-1">Active</div></a>
  <div class="block-2">Disabled</div>
</div>

这个方案不需要任何JS代码，结构更清晰，但前提是你可以修改原本的HTML嵌套关系。

方案三：jQuery版本（如果你项目里用了jQuery） #

如果你的项目依赖jQuery，代码可以更简洁：

$('.block-2').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
});

原理和方案一完全一致，只是用jQuery的语法简化了事件绑定。

内容的提问来源于stack exchange，提问作者Neia