如何在点击按钮时精确触发对应事件并阻止其他事件执行

本文讲解如何通过事件委托与目标检测，为多个按钮绑定单一事件监听器，并确保每次仅响应被点击的按钮，避免相互干扰。核心在于利用 Event.target 精准识别触发源，替代重复绑定或条件冲突逻辑。

本文讲解如何通过事件委托与目标检测，为多个按钮绑定单一事件监听器，并确保每次仅响应被点击的按钮，避免相互干扰。核心在于利用 event.target 精准识别触发源，替代重复绑定或条件冲突逻辑。

在实际开发中，常遇到类似需求：多个按钮（如“Player one”和“Player two”）需分别向同一容器（如 ）写入不同内容，但又必须保证点击其中一个时，另一个的逻辑绝不执行。若错误地在统一事件监听器中无差别执行两段赋值代码（如原问题中连续设置 insertName.innerHTML），会导致后执行者覆盖前者，表面看似“只显示一个”，实则逻辑失控、难以维护，且无法真正实现事件隔离。

✅ 正确做法是：使用单个事件监听器 + 精确的目标判断，而非为每个按钮单独绑定监听器（易造成冗余）或在同一个回调中顺序执行所有分支（导致覆盖与误触发）。

以下是推荐实现方案：

// 获取关键 dom 元素（仅需一次） const athleteRanking = document.getElementById('athlete-ranking'); const player1Btn = document.getElementById('player-1'); const player2Btn = document.getElementById('player-2');  // 统一监听 document 或父容器（推荐使用事件委托） document.addEventListener('click', (e) => {   // 精准匹配点击目标是否为指定按钮   if (e.target === player1Btn) {     athleteRanking.textContent = player1Btn.textContent; // 推荐用 textContent 替代 innerHTML（更安全）     console.log('Player one selected');   } else if (e.target === player2Btn) {     athleteRanking.textContent = player2Btn.textContent;     console.log('Player two selected');   }   // 注意：此处无需 else 分支处理无关点击，可留空或添加默认逻辑 });

? 关键要点说明：

• ✅ e.target 是核心：它始终指向实际被点击的 DOM 元素，因此能严格区分 #player-1 和 #player-2，彻底避免误触发；
• ✅ 单监听器 + 条件分支：比为每个按钮调用 addEventListener 更高效，也规避了事件叠加风险；
• ✅ 使用 textContent 而非 innerHTML：因按钮内容为纯文本，textContent 更安全（防止 xss）、性能更好，且语义更准确；
• ⚠️ 避免在 if/else 外部操作 DOM：确保所有写入逻辑严格限定在对应分支内，杜绝跨分支污染；
• ? 扩展性提示：若后续新增按钮（如 #player-3），只需增加一个 else if 分支，结构清晰易维护。

? 进阶建议：若按钮动态生成或数量较多，可改用事件委托到公共父容器（如