如何实现特定元素被多次点击时跳过对应触发操作？

你需要判断点击的线条元素是否已经被标记过颜色（即不存在red或blue类），只有未标记时才执行状态变更逻辑，修改后的代码如下：

function handleClicklEvent(e) {
    const clicked_line = e.target
    console.log("length:", clicked_line.classList.length)
    console.log("Has red class?", clicked_line.classList.contains('red'))
    console.log("Has blue class?", clicked_line.classList.contains('blue'))
    // 新增判断：元素既没有red类也没有blue类时才执行逻辑
    if(!clicked_line.classList.contains('red') && !clicked_line.classList.contains('blue')) {
        clicked_line.classList.add(game_status);
        toggle_game_status(); // 切换red/blue状态
        player_turn.innerHTML = game_status; 
        // 可选优化：执行完成后直接移除点击事件，后续点击不会再触发该函数，无需重复判断
        clicked_line.removeEventListener('click', handleClicklEvent)
    }   
}

相关说明 #

• 为什么不建议用classList.length判断？
  你的线条元素默认就带有horizontal_line或vertical_line类，初始classList.length值就为1，不是0，所以用长度判断无法识别是否已经加过颜色类。如果后续你给元素新增其他通用类，长度判断会完全失效。
• 关于classList的误解
  classList不是指针结构，它是DOMTokenList类型的实例，是当前元素类名的实时可读写集合，你对它执行add/remove/contains等操作，会直接作用于元素的class属性，是操作元素类名的官方原生API。

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