如何让超链接内的按钮仅触发自身事件而不触发超链接？

这个问题本质是事件冒泡搞的鬼——按钮的点击事件会顺着DOM树向上传递，触发外层<a>标签的跳转行为。我给你几种实用的解决思路，按需选择：

方法1：在按钮点击事件中阻止冒泡 #

直接在你的like_element函数里阻止事件传播，这样点击按钮时，事件就不会传到外层的超链接了。

修改后的HTML：

<a href="element.html">
  <div class="element_card">
    这是一个覆盖超链接的元素卡片。
    <button type="button" onclick="like_element(event)">点赞该元素但不触发超链接。</button>
  </div>
</a>

对应的JS函数：

function like_element(event) {
  // 执行你的点赞逻辑
  console.log('已点赞该元素！');
  
  // 阻止事件向上冒泡到外层的<a>标签
  event.stopPropagation();
  
  // 额外提醒：如果你的按钮是submit类型，还需要加event.preventDefault()阻止提交，但这里type是button，不用管
}

方法2：用现代事件绑定方式（更推荐） #

如果不想用内联的onclick，可以用addEventListener来绑定事件，逻辑更清晰：

HTML结构：

<a href="element.html">
  <div class="element_card">
    这是一个覆盖超链接的元素卡片。
    <button type="button" id="like-btn">点赞该元素但不触发超链接。</button>
  </div>
</a>

JS代码：

// 获取按钮元素
const likeBtn = document.getElementById('like-btn');

// 绑定点击事件
likeBtn.addEventListener('click', function(event) {
  // 执行点赞操作
  console.log('点赞成功！');
  
  // 阻止事件冒泡，避免触发超链接跳转
  event.stopPropagation();
});

方法3：调整HTML结构（最规范） #

其实从HTML语义化和规范角度，不建议把交互元素（比如）嵌套在标签内，虽然HTML5允许这么做，但很容易引发这类事件冲突。你可以调整结构，把超链接和按钮放在同一个父容器里：

<div class="element_card">
  <!-- 让超链接覆盖卡片的可点击区域 -->
  <a href="element.html" class="card-link"></a>
  <div class="card-content">这是一个覆盖超链接的元素卡片。</div>
  <button type="button" onclick="like_element()">点赞该元素但不触发超链接。</button>
</div>

然后用CSS调整样式，让.card-link占满整个卡片的空间，这样点击卡片其他区域会跳转，点击按钮就只会触发点赞：

.element_card {
  position: relative;
  /* 你的卡片样式 */
}

.card-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.card-content, .element_card button {
  position: relative;
  z-index: 2;
}

这种方法从根源上避免了事件冲突，结构更清晰，也符合语义化要求。

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