document.querySelector 返回 null 是按钮点击无反应的首要原因，需检查选择器准确性、DOM 加载时机、元素唯一性、表单默认行为、CSS 遮挡、动态内容结构及 disabled 状态异步恢复漏写。
document.querySelector 拿不到按钮，先别写事件绑定
按钮点击没反应，八成是 document.querySelector 返回 null，后续 addEventListener 直接静默失败。不是 JS 写错了，是根本没选中元素。
- 在控制台手动执行
document.querySelector('[data-product-id="1057"]')，看是否返回 DOM 元素；不返回就说明属性名、值大小写、引号或空格对不上 - ID 不能纯数字：
id="1"合法但 JS 不认，改用id="btn-add-1"或优先用data-属性 - 脚本放在
里？必须确保执行时机晚于 DOM 加载，要么加DOMContentLoaded监听，要么把<script></script>放在前 - 避免模糊选择器：
.add-to-cart可能匹配多个按钮，而你只给第一个绑了事件，结果点的是第二个——改用带唯一标识的属性选择器，比如[data-sku="SKU-8892"]
按钮在表单里却没设 type="button"
商品页常把“加入购物车”按钮包在 里，但忘了声明 type，浏览器默认按 submit 处理，一点击就刷新页面，看起来像“点了没反应”。
- 必须显式写
，否则就是提交行为 - 如果真要触发表单提交（比如同步库存），也要在事件回调开头加
event.preventDefault()，否则跳转会中断 JS 执行 - 检查有没有
href="#"的伪链接式按钮，它会导致页面滚到顶部，建议全量替换为或href="javascript:void(0)"
按钮看着可点，实际被 CSS 或结构拦住了
开发者工具里按钮高亮正常，hover 也有样式，但就是点不动——大概率是 pointer-events: none、父容器裁剪，或者上层有透明遮罩。
- 在 Elements 面板选中按钮，右侧 Styles 面板搜索
pointer-events，确认不是none；也检查父级是否设置了该属性并继承下来 - 查看是否有
overflow: hidden或position: relative+z-index过低，导致按钮可点击区域被裁掉 - 动态插入的内容（如 Ajax 加载的商品详情）里，是否存在孤立的空
标签？浏览器会提前闭合它，让后续按钮脱离表单上下文，彻底失去语义关联 - 模态框、弹层、广告 banner 等组件可能视觉上没盖住按钮，但 DOM 层级上 z-index 更高，用 Elements 面板拖动节点就能发现覆盖关系
事件绑了，但触发后状态立刻被覆盖
常见于“加入购物车”后禁用按钮防止重复点击，但恢复逻辑漏写或写错位置，导致按钮永远灰着。
-
disabled是布尔属性：存在即禁用，disabled="false"无效；检查 Elements 面板里按钮 DOM 是否真实含disabled字样 - 异步请求（如
fetch）后只在.then()里写btn.disabled = false，但没写.catch()分支 → 请求失败，按钮卡死 - 多个监听器叠加：一个 click 监听器设
disabled=true，另一个 submit 监听器也设，但只有一个负责恢复 → 状态残留 - 别混用原生行为和手动控制：比如监听
click后调form.submit()，又没preventDefault()，可能触发两次提交或跳转，JS 恢复逻辑根本没机会跑
真正难排查的，往往是 DOM 结构错误（比如空 提前闭合）或 disabled 状态在异步分支里漏恢复——这两处不报错、不警告，只让按钮安静地失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
