document.querySelector 返回 null 的主因是选择器错误、DOM 未加载或 ID 大小写/空格不一致；应检查 Elements 面板确认真实属性值，并确保脚本在 DOMContentLoaded 后执行或置于 </body> 前。
document.querySelector 返回 null 怎么办
这是最常见也最容易被忽略的起点：选择器写错、元素还没加载、ID 大小写或空格不一致，都会让 document.querySelector 返回 null，后续 addEventListener 直接报 Cannot read properties of null。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具 Console，手动输入
document.querySelector("#my-btn")（把你实际用的选择器填进去） - 如果返回
null，立刻切到 Elements 面板，右键目标按钮 → “Edit as HTML”，确认它真实存在的id或class值——比如 HTML 写的是id="myBtn"，JS 却写了"#my-btn"，就必然失配 - 检查是否在 DOM 加载前就执行了绑定代码；把脚本移到
</body>前，或包装进DOMContentLoaded事件里
button 看得见但点不动，可能是 pointer-events 被关了
按钮渲染正常、hover 样式也有，就是 click 不触发——90% 是 pointer-events: none 在作祟，它可能来自按钮自身、父容器，甚至全局 CSS 重置规则。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板中选中按钮，在右侧 Styles 面板搜索
pointer-events，确认值不是none - 逐层向上检查父级元素（尤其是遮罩层、弹窗容器、
position: fixed的导航栏），它们若设了pointer-events: none，会直接拦截所有子元素点击 - 临时加一句
style="pointer-events: auto !important;"到按钮上快速验证是否是该问题
事件绑对了，但 click 没触发，检查是否被布局偏移打断
典型场景：用户先聚焦 <textarea>，它突然增高，下方按钮瞬间下移；用户“看着点了按钮”，其实 pointerdown 和 pointerup 发生在不同位置，浏览器按规范丢弃 click。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用相关 CSS 动画/过渡，比如临时注释掉
textarea:focus { height: 5rem; }，看问题是否消失 - 改用
min-height+transition: min-height替代直接改height，避免重排导致的瞬时位移 - 给按钮加
position: relative和固定top偏移，或用flex/grid布局隔离文本域与按钮，防止彼此推挤
用事件委托时 event.target 不是你想的元素
绑在 document 或父容器上，回调里直接判断 event.target.id === "submit"，结果总不进分支——因为用户点的可能是按钮里的 <span>、图标或文字节点，event.target 是那个子元素，不是按钮本身。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
event.currentTarget（即你绑定事件的那个元素）做逻辑判断 - 或者用
event.target.closest("button")向上找最近的按钮，再判断它的属性 - 避免用
event.target.classList.contains("btn")这类模糊匹配，尤其当按钮内含 SVG 或图片时，target很可能落在子节点上
cursor: pointer、没用 <button> 标签、或者 viewport 缺了 initial-scale=1.0 导致 iOS Safari 强制加 300ms 延迟。这些细节不显眼，但一漏就全盘失效。 
