按钮点击没反应，先查是否被遮罩层视觉遮挡或 pointer-events: none 等样式禁用；再确认 disabled 属性是否残留、DOM 是否加载完成、事件绑定是否正确、移动端触控区是否合规。
按钮点击没反应，先查是否被 CSS 遮挡或禁用
样式“失效”常是假象——按钮看起来正常，但点不了。最常见原因是 pointer-events: none 或 opacity: 0 配合 position: absolute 的遮罩层盖住了它；也可能是父级 fieldset[disabled] 或自身 disabled 属性残留未清除。
检查方法：用浏览器开发者工具选中按钮，看 Styles 面板里 pointer-events 是否为 none，Computed 标签页中 pointer-events 实际值是否生效；再确认 Elements 面板中该元素是否带 disabled 属性（哪怕 JS 已设 button.disabled = false，若 HTML 原始写了 disabled，它仍会生效）。
- 修复时优先移除 HTML 中的
disabled属性，改用 JS 控制button.disabled = true/false - 避免在父容器上写
pointer-events: none，除非你明确知道子元素已单独启用 - 用
fieldset包裹表单控件时，务必确认它没被意外加disabled
事件绑定后依然不触发，大概率是 DOM 时机或选择器问题
jQuery 里写 $('.add-to-cart').click(...) 却无效，90% 是因为元素还没加载完就执行了绑定——比如把代码放在 里，或没包在 $(document).ready(function() { ... }) 中；也可能 HTML 里根本没匹配 .add-to-cart 这个 class，或 class 名拼错（add_to_cart vs add-to-cart）。
纯 JS 同理：document.querySelector('.add-to-cart') 返回 null，后续 .addEventListener 就白绑。
- 确保脚本在 DOM 渲染后执行：用
DOMContentLoaded或把<script></script>放在前 - 检查控制台是否报
TypeError: Cannot read property 'addEventListener' of null——这是最直接的线索 - 动态插入的按钮（如 AJAX 加载商品列表后生成），必须用事件委托：
document.addEventListener('click', e => { if (e.target.matches('[data-action="add-to-cart"]')) { ... } })
fetch 提交购物车失败却不报错？别漏掉 response.ok 和 status 判断
很多代码只写 fetch(...).then(res => res.json()).then(data => {...})，但 fetch 只在网络错误时 reject，HTTP 状态码 400/401/500 仍走 then 分支。结果接口返回 { success: false, message: "库存不足" }，前端却当成功处理，UI 没反馈。
更隐蔽的是没设请求头：Content-Type: application/json 缺失，后端可能解析不到 productId 字段，静默失败。
- 必须检查
response.ok，否则 4xx/5xx 会被当成成功响应 - 对非 2xx 状态手动抛错：
if (!response.ok) throw new Error(`${response.status} ${response.statusText}`) -
fetch的body要用JSON.stringify({ productId: id, quantity: 1 })，且headers显式加'Content-Type': 'application/json' - 401（未登录）应跳转登录页，400 应读取
response.json()取具体错误信息并提示用户，而不是笼统显示“请求失败”
移动端按钮点不中，不是样式问题而是触控区合规缺陷
按钮 CSS 写了 padding: 8px，看着够大，但在 iPhone 上仍难点中——因为 WCAG 要求最小触控区 ≥ 44×44px，而 inline-block 元素间的换行符会产生空白间隙，实际渲染宽度可能只有 38px；或者用了 font-size: 12px + line-height: 1，导致文字撑不开高度。
更麻烦的是，部分安卓机对 :hover 有延迟或不触发，导致“按下去没反馈”的错觉。
- 显式设
min-width: 44px; min-height: 44px，比只靠 padding 更可靠 - 避免
display: inline-block，改用display: block或flex布局消除间隙 - 禁用
:hover做主要反馈，改用:active或 JS 添加is-pressedclass - 真机测试必做：用 Safari 开发者工具连真机，或直接在 iOS 设备上长按按钮看是否高亮
真正卡住人的，往往不是某一行代码写错，而是状态管理断层：按钮禁用后没恢复、fetch 失败后没清 loading、localStorage 存了但没同步到 UI。这些地方没有报错，但用户就是觉得“点了没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
