按钮点击没反应需先检查type属性是否被浏览器默认劫持，非提交按钮应显式设type="button"，提交按钮用type="submit"并监听form的submit事件，禁用状态优先用disabled属性，事件绑定推荐addEventListener而非onclick属性。
按钮点击没反应？先查 type 属性是否被浏览器默认劫持
浏览器对 button 元素的默认 type 是 submit。如果它意外出现在 <form> 内，点一下就刷新页面或跳转——不是“没反应”，是逻辑被中断了。
常见错误场景：
- 在表单里写
<button>提交</button>，没设type，结果每次点击都提交 - 用框架生成按钮时漏掉
type="button"，上线后用户一按就丢数据 - Safari 中
<input type="button">的 hover 样式失效，而<button type="button">一致可用
实操建议：
- 非提交用途的按钮，一律显式写
type="button" - 提交按钮统一用
type="submit"，并在<form>上监听submit事件，而不是给按钮绑click - 禁用状态优先用
button.disabled = true，比 CSSopacity+pointer-events: none更可靠（尤其在触屏设备上）
用 addEventListener 而不是 onclick 属性绑定事件
onclick 属性写法看似简单，但会覆盖已有监听器、无法移除、难以调试，且把 JS 逻辑硬塞进 HTML，破坏可维护性。
立即学习“前端免费学习笔记（深入）”；
更关键的是：当多个模块都要响应同一个按钮（比如埋点、权限校验、主业务），onclick 只能留一个入口，后续逻辑得绕着它拼字符串。
实操建议：
- 用
document.getElementById('myBtn').addEventListener('click', handler)绑定，支持多次调用 - 需要解绑时，用
removeEventListener('click', handler)，注意函数引用必须相同 - 防重复点击，可在 handler 开头加
if (btn.disabled) return，再设btn.disabled = true，加载完成后恢复 - 事件对象里别忘了
event.preventDefault()—— 尤其按钮在<form>里或包裹了<a>
按钮状态同步：disabled 和 loading class 必须一起动
只设 disabled 不加视觉反馈，用户可能以为卡住了；只加 is-loading class 却不设 disabled，连点会触发多次请求。
移动端尤其明显：手指按下去还没抬，请求已发三遍。
实操建议：
- 状态变更必须原子化：
btn.disabled = true; btn.classList.add('is-loading'); - 成功/失败后统一恢复：
btn.disabled = false; btn.classList.remove('is-loading'); - CSS 中定义
.is-loading::after或背景旋转动画，避免用 JS 动态插入元素（影响重排） - 不要用
setTimeout模拟 loading 状态——真实接口延迟不可控，应以请求生命周期为准
返回顶部、加载更多这类功能按钮，滚动监听别只看 scrollHeight === scrollTop + innerHeight
这个等式在 iOS Safari、缩放页面、动态插入 DOM 后大概率不成立。直接依赖它，按钮永远不出现，或者滚到底了还一直显示。
根本原因是 document.body.scrollHeight 在某些渲染时机下滞后于实际高度，尤其是 WebKit 内核。
实操建议：
- 改用阈值判断：
window.scrollY + window.innerHeight >= document.body.scrollHeight - 100 - 监听对象选
window，不是某个容器（除非明确设了overflow-y: scroll） - scroll 事件加
{ passive: true }，防止移动端卡顿 - 用
window.pageYOffset读取滚动位置，兼容性比scrollTop更稳
复杂点往往不在怎么写按钮，而在怎么让它「不乱动」：状态不同步、事件被吞、滚动阈值漂移、移动端伪类失效……这些都不是语法错误，而是运行时环境和用户行为共同作用的结果。
