触发addEventListener后如何停止链？

Question

所以我有一个 addEventListener 函数，当单击它时，它将在两个不同的按钮中触发 addEventListener 。当单击第一个按钮时，它将插入 player-1 文本或第二个按钮将 player-2 文本插入到 athlete-ranking id insideHTML。

该函数将触发内部的所有内容，但我不知道如何在单击 player-1 或 player-2 按钮时阻止另一个事件发生。我也想双向工作。意思是单击 player-2 事件，这样 player-1 事件就不会被触发。

JS

rank.addEventListener('click', (e) => {
  e.preventDefault()
  if (some code) {
    const insertName = document.getElementById('athlete-ranking');
    // First Event
    const obtainFirstName = document.getElementById('player-1').innerHTML;
    insertName.innerHTML = obtainFirstName

    // Second Event
    const obtainSecondName = document.getElementById('player-2').innerHTML;
    insertName.innerHTML = obtainSecondName
   } else {
   some code
   }
)}

HTML

<button id="player-1">Player one</button>
<button id="player-2">Player two</button>
<span id="athlete-ranking"></span>

谢谢！

Answer 1

通过此设置，单击“玩家一”将在“运动员排名”范围中插入“玩家一”文本，单击“玩家二”将插入“玩家二”文本，而不会影响彼此的事件。 handlePlayer1Click 函数绑定到“玩家一”按钮的单击事件，handlePlayer2Click 函数绑定到“玩家二”按钮的单击事件。

const insertName = document.getElementById('athlete-ranking');
const player1Btn = document.getElementById('player-1');
const player2Btn = document.getElementById('player-2');

function handlePlayer1Click(e) {
  e.preventDefault();
  // First Event: Insert player-1 text into athlete-ranking span
  insertName.innerHTML = player1Btn.innerHTML;
}

function handlePlayer2Click(e) {
  e.preventDefault();
  // Second Event: Insert player-2 text into athlete-ranking span
  insertName.innerHTML = player2Btn.innerHTML;
}

// Add event listeners to the buttons
player1Btn.addEventListener('click', handlePlayer1Click);
player2Btn.addEventListener('click', handlePlayer2Click);

<button id="player-1">Player one</button>
<button id="player-2">Player two</button>
<span id="athlete-ranking"></span>