本文详解为何按钮点击后文字未按预期更新，并指出 CSS 的 :active 伪类与 JavaScript visibility 控制之间的冲突根源，提供可立即生效的修复方案及最佳实践。
本文详解为何按钮点击后文字未按预期更新，并指出 css 的 `:active` 伪类与 javascript `visibility` 控制之间的冲突根源，提供可立即生效的修复方案及最佳实践。
问题核心并不在于 JavaScript 事件监听器本身——你的 addEventListener('click', ...) 写法完全正确，且作用于特定按钮（#my-btn）是精准、推荐的做法。真正导致“函数看似不工作”的根本原因，是 CSS 规则与 JS 状态发生了隐性冲突：
#my-btn:active {
visibility: hidden;
}
这段样式意味着：只要用户按住按钮（处于 active 状态），按钮就会被隐藏。而点击操作天然包含 :active 瞬态（通常持续几十毫秒）。因此，当 JS 在 click 事件中将 visibility 设为 'visible' 后，若用户尚未松开鼠标，:active 伪类仍生效，CSS 会立即再次覆盖 JS 设置，使按钮重新不可见——造成“文字变了但看不见”的错觉。
✅ 正确解法：移除冲突的 :active 隐藏逻辑，改用 JS 全面接管状态：
<button type="button" id="my-btn">Submit</button>
/* 删除 #my-btn:active { visibility: hidden; } */
/* 如需点击反馈，可用 transition + opacity 或 background-color */
#my-btn {
transition: opacity 0.2s;
}
#my-btn:active {
opacity: 0.7; /* 更安全的视觉反馈 */
}
const myTurn = document.querySelector('#my-btn');
myTurn.addEventListener('click', function(e) {
e.preventDefault(); // 对 button[type="button"] 非必需，但保留无害
myTurn.textContent = 'plz check your...'; // 推荐用 textContent 替代 innerText（性能更好、语义更清晰）
myTurn.disabled = true; // 可选：防止重复提交，提升用户体验
});
⚠️ 注意事项：
- e.preventDefault() 对
- 避免混用 visibility: hidden 和 display: none：前者保留布局空间，后者彻底移除；若需完全隐藏并释放空间，应统一用 display: none 并在 JS 中同步设置；
- 若需实现“点击后禁用+文案变更+松开后保持可见”，务必不依赖 :active 控制可见性，所有状态均由 JS 显式管理；
- 使用 textContent 而非 innerText：前者更标准、性能更高，且避免 IE 兼容性陷阱。
总结：这不是 JavaScript 事件绑定失败，而是 CSS 与 JS 对同一属性（visibility）的竞态覆盖。修复的关键在于分离关注点——让 CSS 负责过渡动效与基础样式，让 JS 负责业务状态（文案、禁用、加载态等）。这样既保证逻辑清晰，又杜绝隐性 Bug。
