本文详解为何 visibility: hidden 与 :active 伪类冲突导致按钮点击后文字不更新，并提供正确实现方案——移除干扰 CSS、合理使用内联样式，确保事件精准绑定且行为可预测。
本文详解为何 `visibility: hidden` 与 `:active` 伪类冲突导致按钮点击后文字不更新，并提供正确实现方案——移除干扰 css、合理使用内联样式，确保事件精准绑定且行为可预测。
你遇到的问题看似是 JavaScript 事件未触发，实则是 CSS 样式与 JS 行为产生了隐性冲突。关键症结在于这段 CSS：
#my-btn:active {
visibility: hidden;
}:active 伪类在用户按下鼠标（或触控）但尚未松开时生效；而 visibility: hidden 会让元素保留占位空间但不可见。当用户点击按钮时，:active 立即生效 → 按钮瞬间“消失”，导致后续 JS 中 myTurn.style.visibility = 'visible' 的执行虽成功，但因 DOM 渲染时机与伪类状态叠加，视觉上常表现为“无变化”或“闪烁后恢复原状”——尤其在快速点击时极易误判为 JS 失效。
更严重的是：e.preventDefault() 对 <button> 元素默认行为（如表单提交）有效，但对 visibility 的 CSS 切换毫无影响，它无法阻止 :active 的样式应用。
✅ 正确解法：避免用 :active 控制可见性，改由 JS 统一管理状态
首先，移除冲突的 CSS：
/* ❌ 删除这一段 */
#my-btn:active {
visibility: hidden;
}然后，确保 HTML 结构完整（含 button 元素）：
<button type="button" id="my-btn">Submit</button>
JavaScript 保持简洁可靠（无需 preventDefault，除非它在 form 内且需阻止提交）：
const myTurn = document.querySelector('#my-btn');
myTurn.addEventListener('click', function() {
// 直接修改文本和可见性（初始 visibility 默认为 'visible'，无需显式设）
myTurn.textContent = 'plz check your...';
});? 进阶建议（提升用户体验）：
- 若需“点击即禁用+提示”，推荐结合 disabled 属性防止重复点击：
myTurn.addEventListener('click', function() { myTurn.disabled = true; myTurn.textContent = 'plz check your...'; }); - 如需过渡效果，可配合 CSS opacity + pointer-events（比 visibility 更易控制）：
#my-btn.waiting { opacity: 0.7; pointer-events: none; }myTurn.classList.add('waiting'); myTurn.textContent = 'plz check your...';
⚠️ 注意事项：
- innerText 会解析 HTML 实体，推荐使用 textContent（性能更好、更安全）；
- 确保脚本在 DOM 加载完成后执行（放在 </body> 前，或包裹在 DOMContentLoaded 中）；
- 不要依赖 :active 实现功能态切换——它仅用于瞬时视觉反馈，状态管理应交由 JS + class 或内联样式。
总结：CSS 伪类与 JS 状态操作应职责分离。:active 仅负责“按下时的微动效”，而按钮文案、可用性、可见性等业务状态，必须由 JavaScript 显式控制并同步更新 DOM 属性或 class，才能保证逻辑清晰、行为稳定、调试可控。
