如何实现a标签内按钮不触发父级锚点标签的点击跳转？

整卡被<a>标签包裹实现点击跳转，要求内部class为favorites的按钮点击时不触发父级a标签跳转，卡片其余区域点击跳转逻辑保持不变。调整z-index的方案无法生效。

z-index属性仅控制元素的视觉层叠优先级，不影响DOM事件的传播逻辑。点击子元素时，事件默认会沿DOM树向上冒泡，依次触发父级元素绑定的事件，因此无论按钮视觉层级多高，点击后都会触发外层a标签的默认跳转行为。

无需改动现有HTML结构和样式，给收藏按钮绑定点击事件，在事件回调中阻断事件冒泡和默认行为即可：

// 原生JS实现
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.favorites').forEach(btn => {
    btn.addEventListener('click', e => {
      // 阻止事件向上冒泡到父级a标签
      e.stopPropagation();
      // 阻断默认行为干扰
      e.preventDefault();

      // 此处编写收藏按钮自身逻辑，比如切换图标状态、调用收藏接口等
    })
  })
})

jQuery环境下写法：

$(() => {
  $(document).on('click', '.favorites', e => {
    e.stopPropagation();
    e.preventDefault();
    // 收藏按钮业务逻辑
  })
})

不建议使用pointer-events属性实现该需求：如果给父级设置该属性会影响整卡跳转，给按钮设置pointer-events: none会导致按钮自身无法响应点击，没有实用价值。JS阻止冒泡是兼容性最好、维护成本最低的方案。

内容的提问来源于stack exchange，提问作者Rahil Əliyev