英文:
How to stop the chain after trigger addEventListener?
问题
我有一个addEventListener函数，当单击它时，将触发两个不同按钮中的addEventListener。当单击第一个按钮时，它将在athlete-ranking id的innerHTML中插入player-1文本或第二个按钮以插入player-2文本。
这个函数将触发其中的一切，但我不知道如何阻止在单击player-1或player-2按钮时发生另一个事件。我希望两种方式都能工作。也就是说，单击player-2事件，player-1事件就不会被触发。
JS
rank.addEventListener('click', (e) => {
e.preventDefault();
if (some code) {
const insertName = document.getElementById('athlete-ranking');
// 第一个事件
const obtainFirstName = document.getElementById('player-1').innerHTML;
insertName.innerHTML = obtainFirstName;
// 第二个事件
const obtainSecondName = document.getElementById('player-2').innerHTML;
insertName.innerHTML = obtainSecondName;
} else {
some code
}
)}
HTML
<button id="player-1">玩家一</button>
<button id="player-2">玩家二</button>
<span id="athlete-ranking"></span>
英文:
So I have an addEventListener function which will trigger the addEventListener in two different buttons when click on it. When click the first buttons, it will then insert player-1 text or second button to insert player-2 text into athlete-ranking id innerHTML.
The function will trigger everything inside but I don't know how to stop the the other event for happening when either player-1 or player-2 button is clicked. I want to work both ways too. Meaning click the player-2 event so the player-1 event won't be triggered.
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>
Thanks!
答案1
得分: 2
是的，您可以通过使用单个事件监听器并使用条件语句来区分两个按钮来实现所需的行为。
const insertName = document.getElementById('athlete-ranking');
const player1Btn = document.getElementById('player-1');
const player2Btn = document.getElementById('player-2');
document.addEventListener('click', (e) => {
if (e.target === player1Btn) {
// 第一个事件：将player-1按钮的文本插入到athlete-ranking span中
insertName.innerHTML = player1Btn.innerHTML;
} else if (e.target === player2Btn) {
// 第二个事件：将player-2按钮的文本插入到athlete-ranking span中
insertName.innerHTML = player2Btn.innerHTML;
} else {
// 如果需要，处理其他情况
}
});
<button id="player-1">Player one</button>
<button id="player-2">Player two</button>
<span id="athlete-ranking"></span>
英文:
Yeah, why not you can achieve the desired behavior by using a single event listener with conditional statements to differentiate between the two buttons.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const insertName = document.getElementById('athlete-ranking');
const player1Btn = document.getElementById('player-1');
const player2Btn = document.getElementById('player-2');
document.addEventListener('click', (e) => {
if (e.target === player1Btn) {
// First Event: Insert player-1 text into athlete-ranking span
insertName.innerHTML = player1Btn.innerHTML;
} else if (e.target === player2Btn) {
// Second Event: Insert player-2 text into athlete-ranking span
insertName.innerHTML = player2Btn.innerHTML;
} else {
// Handle other cases if needed
}
});
<!-- language: lang-html -->
<button id="player-1">Player one</button>
<button id="player-2">Player two</button>
<span id="athlete-ranking"></span>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论