按钮与链接点击区域冲突的根本原因是html非法嵌套（如内嵌）导致浏览器修正dom，使热区错位；其次padding被误用为margin造成视觉间隙实为可点击区域。
为什么按钮和链接的点击区域会互相“打架”
根本原因不是样式写错了，而是 HTML 结构本身违反规范：<a></a> 里嵌套 <button></button>、<input> 或其他交互元素时，浏览器会自动修正 DOM——把 <button></button> “踢出”父级，但保留其事件绑定逻辑。结果就是：视觉上按钮在链接内，实际热区却覆盖了按钮外侧空白，点击间隙也能触发跳转。
另一个常见诱因是 padding 被误当 margin 用：给 <button></button> 加 padding: 12px 后，两个按钮并排时，它们各自的 padding 区域紧挨着，中间没有真正“不可点”的间隙——用户点在视觉空隙里，其实正中某个按钮的 padding 热区。
- 检查 DOM 结构：运行
document.querySelectorAll('a button, a input, a select')，有返回值就说明存在非法嵌套 - 禁用所有 CSS 后再测试点击行为，确认是否仍冲突——若仍冲突，基本可断定是结构问题
- 用 DevTools 的 “Elements > Event Listeners” 面板看点击事件绑定在哪一层，常会发现事件绑在了不该绑的父容器上
如何让卡片整体可点击又不干扰内部 checkbox
典型场景：一个 <div class="card"> 要跳转详情页，里面有个 <code><input type="checkbox"> 控制选中状态。直接给卡片加 onclick 会导致点 checkbox 时既选中又跳转。
正确做法是靠事件目标判断，而不是靠阻止冒泡：
- 给卡片加
role="link"和tabindex="0"，保证键盘可访问 - 监听
click和keydown（Enter/Space），统一处理 - 在 handler 中用
event.target.closest('input[type="checkbox"]')判断是否点在 checkbox 上 - 如果是 checkbox，不做任何跳转；否则执行
window.location.href = card.dataset.href
注意：不要对 checkbox 单独加 stopPropagation()——它会破坏屏幕阅读器对表单控件的聚焦链路。
图片热区（<map></map>）和 overlay 层同时存在时怎么避免冲突
<img usemap="#mymap"> 和绝对定位的 <div class="overlay"> 叠在一起时，overlay 会拦截所有鼠标事件，导致 <code><area> 完全失效。
解决路径很窄，只有两条可行：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 移除 overlay 的
pointer-events: auto（默认值），改用pointer-events: none，再对 overlay 内部需要响应点击的子元素显式设回pointer-events: auto - 放弃 overlay，改用 SVG 替代
<img> + <map></map>：SVG 的<image></image>元素支持嵌套<rect></rect>/<circle></circle>，且事件捕获天然支持分层穿透
别试图用 z-index 调整层级来“抢”事件——<area> 不是真实 DOM 节点，无法参与 stacking context 排序。
多个 onclick 绑定在同一元素上谁生效
后绑定的会覆盖先绑定的，前提是都用 element.onclick = fn 这种属性赋值方式。如果混用 addEventListener，则全部生效，按注册顺序依次触发。
但更隐蔽的问题是：不同脚本模块可能各自绑定，你以为只有一处，实际已有三处。排查建议：
- 在控制台运行
getEventListeners(document.querySelector('your-selector'))（Chrome/Firefox 支持） - 重点看
click下的listenerBody，快速识别重复逻辑 - 对第三方 SDK 的初始化代码，优先查它是否自带 click 绑定（比如某些分析 SDK 会自动监听所有
<a></a>）
真正难处理的不是“谁覆盖谁”，而是事件 handler 里调用了异步操作（如 fetch 后更新 UI），多个 handler 并发执行导致状态错乱——这时必须加锁或合并请求，不能只靠事件绑定顺序解决。
