JS DOM：如何阻止点击事件触发？

Question

我试图让按钮在满足特定条件时停止工作。由于某种原因，每当我得到 5 分时，无论哪一方，它都会继续前进，甚至不显示分数，我不知道为什么。我尝试过使用 while 循环，但它一直崩溃。有没有像 jQuery 那样简单地关闭它的方法？

const rock = document.querySelector('.rock');
const paper = document.querySelector('.paper');
const scissors = document.querySelector('.scissors');
const h3 = document.querySelector('h3');
const pscore = document.querySelector('#pscore');
const cscore = document.querySelector('#cscore');
let computerScore = 0;
let playerScore = 0;

function computerPlay() {
    var choice = Math.floor(Math.random() * 3 ) + 1; //generate a number 1-3 to find computer choice
    if(choice == 1) {
        return 'rock';
    }
    else if(choice == 2) {
        return 'paper';
    }
    else {
        return 'scissors'

    }
} 

let result; // simpler way of rewriting code?

    rock.addEventListener('click', () => {
        if(computerPlay() == 'rock') {
            result = `The computer chose rock and you chose rock! It's a tie! No change in score.`;
            h3.textContent = result;
            
        }
        else if(computerPlay() == 'paper') {
            result = `The computer chose paper and you chose rock! You lose! Computer Score +1!`;
            h3.textContent = result;
            computerScore++;
            cscore.textContent = computerScore;

     
        }
        else {
            result = `The computer chose scissors and you chose rock! You win! Player Score +1!`; 
            h3.textContent = result;
            playerScore++;
            pscore.textContent = playerScore;

        }
    });

    let playerPaper = paper.addEventListener('click', () => {
        if(computerPlay() == 'paper') {
            result = `The computer chose paper and you chose paper! It's a tie!`;
            h3.textContent = result;    
        }
        else if(computerPlay() == 'scissors') {
            result = `The computer chose scissors and you chose paper! You lose!`;
            h3.textContent = result;
            computerScore++;
            cscore.textContent = computerScore;
        }
        else {
            result = `The computer chose rock and you chose paper! You win!`; 
            h3.textContent = result;
            playerScore++;
            pscore.textContent = playerScore;
        }
        
    });

    let playerScissors = scissors.addEventListener('click', () => {
        if(computerPlay() == 'scissors') {
            result = `The computer chose scissors and you chose scissors! It's a tie!`;
            h3.textContent = result;    
        }
        else if(computerPlay() == 'rock') {
            result = `The computer chose rock and you chose scissors! You lose!`;
            h3.textContent = result;
            computerScore++;
            cscore.textContent = computerScore;
        }
        else {
            result = `The computer chose paper and you chose scissors! You win!`; 
            h3.textContent = result;
            playerScore++;
            pscore.textContent = playerScore;
        }
    })

function playGame(computerChoice) {
    computerChoice = computerPlay();
    if(playerScore == 5) {
        h3.textContent = `The score is 5 to ${computerScore}! You win!`;
    }
    else if(computerScore == 5) {
        h3.textContent = `The score is 5 to ${playerScore}! The computer wins!`;
    }
    
}

除了“游戏结束”功能外，一切都很完美。预先感谢所有的帮助或批评！

Answer 1

如何禁用“点击”事件

评论中的人们对如何改进游戏有一些绝妙的想法。我建议对此进行调查。不过，如果您想阻止点击事件，有多种方法可以实现。

1. 为按钮添加禁用属性。

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.disabled = true
}

<button id="myClicker">Click</button>

2.添加CSS属性pointer-events: none;

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.addEventListener("click",function(){console.log("hi")})
  button.style.pointerEvents = "none";
}

<button id="myClicker">Click</button>

第二种方法适用于不需要向用户指示按钮不再可交互的情况。

3. 防止违约事件。

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.addEventListener("click",function(e){
    e.preventDefault;
  })
}

<button id="myClicker">Click</button>

4. 删除事件监听器。

document.getElementById("yourButtonId").removeEventListener("Click", yourFunctinoNameHere);