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

✅ 推荐解决方案：使用 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 思想）：

.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），即可写出稳定、可维护、符合现代前端规范的交互逻辑。