按钮点击无响应需检查onclick是否误写在父元素上；禁用按钮应结合disabled、aria-busy和css优化可访问性；多按钮推荐事件委托+data属性；文字变更须用textcontent避免破坏结构与语义。
按钮点击后不触发任何动作？检查 onclick 是否写在了错误位置
常见现象是按钮渲染出来了，但点一下毫无反应。最常踩的坑是把 onclick 放在了 <button></button> 标签外部，比如写成 <div onclick="doSomething()"><button>点我</button></div> —— 这样事件绑定的是 div，而用户实际点击区域可能因 padding/margin 偏移，导致“点了但没点上”。
正确做法是直接写在 button 上：<button onclick="alert('hello')">点我</button>。如果用现代写法，更推荐分离逻辑：<button id="myBtn">点我</button>，然后在 <script></script> 中用 document.getElementById('myBtn').addEventListener('click', handler) 绑定。
想禁用按钮又保留样式？别只靠 disabled 属性
disabled 确实能阻止点击，但默认会让按钮变灰、失去焦点、无法被键盘访问——对可访问性（a11y）不友好，尤其当按钮处于加载状态时，用户需要明确感知“正在处理中”。
实用方案是组合使用：<button disabled aria-busy="true" aria-label="提交中">提交</button>。其中 aria-busy 告诉屏幕阅读器当前状态，aria-label 替换默认文本；再配合 CSS 重置禁用态样式：button:disabled { opacity: 0.7; cursor: wait; }，避免原生灰度干扰设计。
注意：仅用 pointer-events: none 或 opacity: 0.5 不足以阻止交互，必须配 disabled 或 JS 拦截，否则键盘用户仍可通过 Enter 触发。
多个按钮共用同一行为？避免重复写 onclick 属性
比如页面有 5 个“删除”按钮，每个都写 onclick="deleteItem(1)"、onclick="deleteItem(2)"……不仅难维护，还容易拼错 ID 或漏改参数。
推荐用委托 + data 属性：<button class="del-btn" data-id="123">删除</button>，然后统一监听父容器：document.querySelector('.list').addEventListener('click', e => { if (e.target.classList.contains('del-btn')) { deleteItem(e.target.dataset.id); } });
这样新增按钮不用改 JS；dataset.id 自动转字符串，若需数字记得 parseInt()；注意确保父容器存在且稳定，别选 body 这种太宽泛的节点，否则可能误触其他按钮。
按钮文字动态变化（如“发送→已发送”）？别直接改 innerHTML
直接写 btn.innerHTML = '已发送' 看似简单，但会清空按钮内所有子节点（比如图标 <i class="icon-send"></i> 就没了），也破坏了无障碍语义（screen reader 可能读出残留标签）。
安全做法是只更新文本节点：btn.textContent = '已发送';。如果必须保留图标，结构改成：<button><i class="icon-send"></i><span class="btn-text">发送</span></button>，再操作 btn.querySelector('.btn-text').textContent = '已发送'。
另外，状态切换后建议加视觉反馈：用 CSS 类控制颜色/过渡，比如 .btn.sent { background: #4CAF50; }，避免纯靠文字变化让用户困惑。
onclick 多十倍工作量。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
