检查是否重复添加了事件监听器,或尝试使用事件委托来解决
示例代码:
// 错误示例
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
console.log('Button clicked');
});
// 在其它地方重复添加了事件监听器,导致触发两次
btn.addEventListener('click', () => {
console.log('Button clicked again');
});
// 正确示例 1: 检查是否重复添加了事件监听器
const btn = document.querySelector('#btn');
const clickHandler = () => {
console.log('Button clicked');
}
btn.removeEventListener('click', clickHandler); // 先移除事件监听器
btn.addEventListener('click', clickHandler);
// 正确示例 2: 使用事件委托来解决
const list = document.querySelector('#list');
list.addEventListener('click', (event) => {
if (event.target.classList.contains('item')) {
console.log('Clicked item:', event.target.innerText);
}
});