为何按钮绑定的addEventListener点击事件无法正常工作？

你遇到的核心问题是CSS的:active伪类设置visibility: hidden导致按钮的click事件无法正常触发。因为click事件的触发需要鼠标按下（mousedown）和松开（mouseup）动作都发生在同一个元素上，而当按钮处于:active状态时会被隐藏，鼠标松开时已经不在按钮元素范围内，所以绑定在按钮上的click事件根本不会执行。

下面提供三种可行的解决方式：

方案1：修改CSS，替换:active的隐藏逻辑 #

如果你的需求只是实现点击时的视觉反馈而非隐藏按钮，可以把:active的样式换成其他效果，比如改变背景色或边框：

#my-btn:active {
  background-color: #e5e7eb;
  border-color: #9ca3af;
  /* 其他你需要的点击反馈样式 */
}

修改后，原有的按钮绑定click事件的JS代码就能正常生效：

const myTurn = document.querySelector('#my-btn');
myTurn.addEventListener('click', function(e) {
  e.preventDefault();
  myTurn.innerText = 'plz check your...';
});

方案2：改用mousedown事件绑定 #

如果必须保留:active隐藏按钮的逻辑，可以把事件换成mousedown——这个事件在鼠标按下瞬间就触发，此时按钮还未被隐藏：

const myTurn = document.querySelector('#my-btn');
myTurn.addEventListener('mousedown', function(e) {
  e.preventDefault();
  myTurn.style.visibility = 'visible';
  myTurn.innerText = 'plz check your...';
});

方案3：优化事件委托，精准监听按钮点击 #

如果坚持使用document级别的事件委托，需要在回调中判断点击目标是否为目标按钮，避免点击页面任意位置都触发逻辑：

const myTurn = document.querySelector('#my-btn');
document.addEventListener('click', function(e) {
  // 确认点击的是目标按钮或按钮内部元素
  if (e.target === myTurn || myTurn.contains(e.target)) {
    e.preventDefault();
    myTurn.style.visibility = 'visible';
    myTurn.innerText = 'plz check your...';
  }
});

内容的提问来源于stack exchange，提问作者hooman asadi