如何阻止卡片内按钮点击触发卡片链接，仅保留卡片本身点击跳转功能

问题现象 #

问题原因 #

你遇到的是典型的事件冒泡问题：三个尺寸按钮全部嵌套在卡片的<a>链接标签内部，点击按钮时，点击事件会沿着DOM结构向上传递到父级<a>元素，进而触发卡片预设的跳转逻辑。
另外你给M按钮加的onClick="return false;"仅能阻止元素默认行为，无法阻止事件向上冒泡，因此不生效。

解决方法 #

方案1：给按钮点击事件添加冒泡阻止逻辑（改造成本最低） #

在每个按钮的点击事件回调中优先执行event.stopPropagation()，即可阻断事件向上传递，不会触发父级<a>的跳转：

<div id="outer">
  <div class="inner"><button class="msgBtn" onClick="event.stopPropagation(); /* 这里写S按钮的自定义逻辑 */">S</button></div>
  <div class="inner"><button class="msgBtn2" onClick="event.stopPropagation(); /* 这里写M按钮的自定义逻辑 */">M</button></div>
  <div class="inner"><button class="msgBtnBack" onClick="event.stopPropagation(); /* 这里写L按钮的自定义逻辑 */">L</button></div>
</div>

如果你的按钮点击逻辑是通过事件监听绑定的，就在监听函数开头加e.stopPropagation()即可：

document.querySelector('.msgBtn').addEventListener('click', e => {
  e.stopPropagation()
  // 后续自定义逻辑
})

方案2：调整DOM结构（更符合HTML规范） #

HTML规范不推荐在<a>标签内嵌套<button>这类可交互元素，你可以把按钮区域移到<a>标签外，和<a>同级放在.t-Card容器内，从根源上避免事件冲突：

<li class="t-Cards-item #CARD_MODIFIERS#" data-id="#ID#" >
  <div class="click t-Card" >
    <!-- a标签只包裹需要触发跳转的卡片区域 -->
    <a href="javascript:void(null);" class="t-Card-wrap" data-id="#ID#">
      <div class="t-Card-icon u-color #CARD_COLOR#"><span class="t-Icon fa #CARD_ICON#"><span class="t-Card-initials" role="presentation">#CARD_INITIALS#</span></span></div>
      <div class="t-Card-titleWrap"><h3 class="t-Card-title">#CARD_TITLE#</h3>
      <h4 class="t-Card-subtitle">#CARD_SUBTITLE#</h4></div>
      <div class="t-Card-body">
        <div class="t-Card-desc">#CARD_TEXT#</div>
        <div class="t-Card-info">#CARD_SUBTEXT#</div>              
      </div>
      <span class="t-Card-colorFill u-color #CARD_COLOR#"></span>
    </a>
    <!-- 按钮区域移到a标签外 -->
    <div id="outer">
      <div class="inner"><button  class="msgBtn"   >S</button></div>
      <div class="inner"><button  class="msgBtn2">M</button></div>
      <div class="inner"><button  class="msgBtnBack">L</button></div>
    </div>
  </div>
</li>

调整后需要自己补一点CSS控制按钮区域的定位，确保和原来的视觉位置一致即可。

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