HTML标准禁止在内嵌套，否则浏览器会自动修复结构导致点击失效；正确做法是用自身模拟按钮样式与行为，或改用配合JS控制跳转。
为什么不能把 <button></button> 直接塞进 <a></a> 里
HTML 标准明确禁止在 <a></a> 元素内嵌套交互式内容（如 <button></button>、<input>、<select></select>）。浏览器会自动“修复”这种结构，比如把 <button></button> 移到 <a></a> 外面，导致点击区域错乱、样式失效、甚至事件绑定失效。你看到按钮没反应，或者点了跳转但没加购物车，大概率是这个原因。
用 <a></a> 模拟按钮行为的正确写法
想保留超链接语义（比如跳转到购物车页），又要有按钮外观和点击反馈，就该让 <a></a> 自己承担按钮角色，而不是套一个 <button></button>：
<a href="/cart/add?id=123" class="btn-add-to-cart">加入购物车</a>
配合 CSS 强制它像按钮：
.btn-add-to-cart {
display: inline-block;
padding: 8px 16px;
background: #ff6b6b;
color: white;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
}
- 必须加
display: inline-block或block，否则padding不生效 - 去掉默认下划线：
text-decoration: none - 确保可访问性：加上
role="button"和tabindex="0"，支持键盘回车触发
需要执行 JS 加购逻辑时，别用 href="#"
如果点击要调用 fetch() 添加商品，再跳转或刷新页面，就别用空 href="#"——它会导致页面跳到顶部，且对屏幕阅读器不友好。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
href="javascript:void(0)"或直接移除href属性，改用role="button" - 更推荐：用
<button></button>，然后用 JS 控制跳转，语义更清晰 - 如果非要用
<a></a>触发 JS，务必加event.preventDefault()阻止默认跳转
移动端点击区域小？补上 touch-action
在 iOS Safari 或部分安卓浏览器里，纯 <a></a> 的点击响应可能延迟 300ms，或点不中。除了加 touch-action: manipulation，更要检查：
- 是否设置了
min-height或min-width—— 小于 44px 的点击区在移动端难触发 - 父容器有没有
pointer-events: none意外拦截了事件 - 是否用了
user-select: none却忘了加-webkit-tap-highlight-color: transparent
真正麻烦的不是嵌套本身，而是混淆语义与行为边界——按钮负责操作，链接负责导航。混着用，早晚得修 DOM 结构和事件流。
