为何JS按钮事件处理器仅触发一次？打印event/多语句可恢复

这种异常行为并非标准DOM事件系统的原生机制，大概率是以下两种常见情况导致的视觉错觉或隐性干扰：

1. 浏览器控制台的日志折叠特性误导 #

Chrome、Firefox等主流浏览器的开发者工具默认会将重复的相同文本日志自动折叠，只显示一次内容并在旁边标注触发次数（比如"sample text" (3)），导致你误以为事件只触发了一次。而打印event对象时，每次都是全新的引用，不会被折叠；多条不同内容的日志也不会触发折叠逻辑，所以看起来能正常多次触发。

验证与解决： #

打开控制台设置（右上角三个点图标 → Settings），取消勾选「Group similar messages in console」选项，再次点击按钮就能看到所有日志输出。

2. 表单默认提交行为的隐性干扰 #

如果你的按钮位于<form>标签内部，浏览器默认会把按钮识别为type="submit"，点击后会触发表单提交，导致页面刷新或局部重载——这会销毁之前绑定的事件监听器，所以看起来只触发了一次。

验证与解决： #

• 给按钮显式设置type="button"：

  <button id="startButton" type="button">Start</button>
  

• 或者在事件监听器中阻止默认提交行为：

  startButton.addEventListener('click', (event) => {
      event.preventDefault();
      console.log("sample text");
  });
  

3. 排查其他潜在干扰 #

如果以上两种情况都不成立，可以通过控制台命令排查监听器状态：

• 在Chrome控制台执行getEventListeners(startButton)，查看点击事件的监听器是否在每次点击后仍存在；
• 检查是否有其他脚本在按钮点击后调用了removeEventListener或修改了按钮的状态（比如设置disabled）。

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