如何为容器添加事件监听器后实现子按钮仅可点击一次？

你的核心问题是搞混了事件委托的绑定对象：handleClick是绑定在.board容器上的，单个按钮本身并没有绑定这个事件处理函数，所以调用button.removeEventListener('click', handleClick)完全无效——因为按钮上根本不存在这个监听。

下面给你两种简单可行的实现方式：

方式一：用Set记录已点击按钮ID #

const buttonsContainer = document.querySelector('.board');
const clickedButtons = new Set(); // 存储已点击的按钮ID

buttonsContainer.addEventListener('click', handleClick);

function handleClick(event){
    const button = event.target;
    // 过滤非按钮元素，以及已点击过的按钮
    if(button.tagName !== 'BUTTON' || clickedButtons.has(button.id)) return;
    
    clickedButtons.add(button.id);
    console.log(button.id + " was clicked");
    // 可选：直接禁用按钮，视觉上反馈更明确
    button.disabled = true;
}

方式二：用CSS类标记已点击状态 #

const buttonsContainer = document.querySelector('.board');

buttonsContainer.addEventListener('click', handleClick);

function handleClick(event){
    const button = event.target;
    // 过滤非按钮元素，以及已标记为点击过的按钮
    if(button.tagName !== 'BUTTON' || button.classList.contains('clicked')) return;
    
    button.classList.add('clicked');
    console.log(button.id + " was clicked");
    // 可选：禁用按钮
    button.disabled = true;
}

这种方式还能配合CSS给已点击按钮加样式，比如：

.clicked {
    background-color: #eee;
    cursor: not-allowed;
}

至于你看到的setTimeout写法，完全是找错了解决方向——按钮本身没有绑定监听，延迟移除也毫无意义，不用再纠结这个。

内容的提问来源于stack exchange，提问作者Pawel