如何通过事件监听器实现按钮点击显示/隐藏表格的稳定交互

✅ 推荐解决方案：使用 addEventListener 替代内联 onclick，并主动阻止默认行为：

document.addEventListener('DOMContentLoaded', () => {
  const toggleBtn = document.getElementById('BtnNextInsured');
  const table = document.getElementById('tblContact');

  toggleBtn.addEventListener('click', (event) => {
    event.preventDefault(); // ✅ 关键：阻止表单默认提交行为
    table.classList.toggle('hide');
  });
});

配套 CSS（简洁、可复用、符合 BEM 思想）：

知元AI

AI智能语音聊天 对讲问答 AI绘画 AI写作 AI创作助手工具

下载

.hide {
  display: none !important;
}

HTML 结构保持不变，仅需为表格添加初始 hide 类：

<table id="tblContact" class="table table-light table-borderless hide">
  <tr>
    <td class="cellContent"><input id="txtEmail" class="txt" placeholder="Email" /></td>
    <td class="cellContent"><input id="txtCell" class="txt" placeholder="Cell Phone" /></td>
    <td class="cellContent"><input id="txtLandline" class="txt" placeholder="Landline" /></td>
  </tr>
  <tr>
    <td colspan="3" style="text-align: right">
      <button id="BtnNextContact" class="btn btn-md btn-primary">Next</button>
    </td>
  </tr>
</table>

? 补充说明与最佳实践：

• 为什么用 classList.toggle()？
  比手动判断 style.display 更可靠：不依赖内联样式，兼容 CSS 预处理器、框架样式覆盖，且语义清晰。
• event.preventDefault() 是核心：它明确告诉浏览器“不要执行按钮的默认动作（如提交表单）”，从而避免页面跳转或刷新。
• 避免 stopImmediatePropagation() 过度使用：除非你注册了多个同类型事件监听器且需阻止后续执行，否则 preventDefault() 已足够；stopImmediatePropagation() 主要用于调试冲突事件，生产环境慎用。
• 初始化时机建议：使用 DOMContentLoaded 而非 window.load，确保 DOM 就绪即可绑定事件，无需等待图片等资源加载，提升响应速度。

? 小结：表格“一闪而过”本质是未拦截浏览器默认行为。掌握 preventDefault() 与语义化类控制（classList.toggle），即可写出稳定、可维护、符合现代前端规范的交互逻辑。