嵌套可点击元素的合理实现方案及HTML规范适配问题

可行的优解方案分场景适配如下： #

场景1：外层为内容卡片（最常见） #

如果外层是商品/资讯/功能卡片类的独立内容模块，直接用原生语义标签 <article> 替代无意义div，这是比div加role属性更优的语义化方案。

• 交互冲突处理推荐用事件源判断方案，无需阻止事件冒泡，不会影响全局的事件监听逻辑：外层点击事件触发时，先判断点击对象是否为内部按钮或按钮的子元素，如果是则跳过外层逻辑
• 无障碍补充：给外层<article>添加role="button"、tabindex="0"，同时绑定键盘事件支持回车、空格触发外层点击动作，适配读屏设备和键盘操作场景

示例代码：

<article 
  class="content-card"
  role="button"
  tabindex="0"
>
  卡片内容文本
  <button class="inner-action-btn">内部操作</button>
</article>

<script>
const card = document.querySelector('.content-card')
const innerBtn = document.querySelector('.inner-action-btn')

// 外层点击逻辑
card.addEventListener('click', (e) => {
  // 点击源是内部按钮时不执行外层逻辑
  if (e.target.closest('.inner-action-btn')) return
  alert('外层动作执行')
})

// 内层按钮点击逻辑
innerBtn.addEventListener('click', () => {
  alert('内层动作执行')
})

// 补充键盘支持
card.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault()
    alert('外层动作执行')
  }
})
</script>

场景2：外层点击为跳转动作 #

如果外层点击的动作是跳转到其他页面，直接用<a>标签作为外层容器即可，这是原生语义的可点击元素，无需额外补充role属性。HTML5规范允许<a>标签内嵌块级元素，只要内部不嵌套其他<a>、<iframe>等交互元素即可，内层按钮同样用上述事件源判断的方式处理冲突即可。

避坑提示 #

不要尝试嵌套<button>标签，不符合HTML规范，会导致浏览器自动修正DOM结构，出现不可预期的样式、交互异常。

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