满足特定条件后如何禁用单击事件？

Question

我正在制作石头、纸、剪刀游戏。 当“You Score”或“Computer Score”达到 3 时，我希望禁用单击事件。 我不确定是否需要禁用“摇滚”按钮或删除点击事件。 无论哪种方式，当分数达到 3 时，我不再希望“摇滚”按钮可点击，这意味着我不希望任何一个分数在达到 3 后变得更高。

function computerPlay(){
  let values = ['Rock', 'Paper', 'Scissors'],
  valueToUse = values [Math.floor(Math.random()* values.length)];
  return valueToUse;
};

const rock = document.querySelector('#rock');
let player = document.querySelector('.playerScore', playerScore = 0);
let computer = document.querySelector('.computerScore', computerScore = 0);
let finalResult = document.querySelector('.finalResult');

rock.addEventListener('click', function() {
  
  let comp = computerPlay()

  if (comp === 'Rock') {
    computer.textContent = `Computer Score: ${computerScore +=0}`
    player.textContent = `Your Score: ${playerScore +=0}`
  
  } else if (comp === 'Paper') {
    computer.textContent = `Computer Score: ${computerScore +=1}`
    player.textContent = `Your Score: ${playerScore +=0}`
    
  } else if (comp === 'Scissors') {
    computer.textContent = `Computer Score: ${computerScore +=0}`
    player.textContent = `Your Score: ${playerScore +=1}`
  }
    if (playerScore === 3){
     finalResult.textContent = "You Won";   
  }
    else if (computerScore === 3){
     finalResult.textContent = "You Lost";  
  }
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My javascript</title>
    <link rel="stylesheet" href="javascript.css">
  </head>
  <body>
    <main>
    <div class="wrapper">
      <h1>Rock, Paper, Scissors!</h1>
      <h2 id="choose">Choose:</h2>
    </div>
    <div class="container">
        <img id="rock" src="https://static.thenounproject.com/png/477914-200.png">
      </button>
    </div>
    <div class="wrapper">
      <p class='computerScore'></p>
      <p class='playerScore'></p>
    </div>
    <div class="wrapper">
      <p class='finalResult'></p>
    </div>
    </main>
    <script src="javascript.js"></script>
</html>

Answer 1

您可以命名您的回调（在外部声明您的回调），以便稍后能够调用removeEventListener 。

例如：

// ...

rock.addEventListener("click", onClick);

function onClick() {
  let comp = computerPlay();

  if (comp === "Rock") {
    computer.textContent = `Computer Score: ${(computerScore += 0)}`;
    player.textContent = `Your Score: ${(playerScore += 0)}`;
  } else if (comp === "Paper") {
    computer.textContent = `Computer Score: ${(computerScore += 1)}`;
    player.textContent = `Your Score: ${(playerScore += 0)}`;
  } else if (comp === "Scissors") {
    computer.textContent = `Computer Score: ${(computerScore += 0)}`;
    player.textContent = `Your Score: ${(playerScore += 1)}`;
  }
  if (playerScore === 3) {
    finalResult.textContent = "You Won";
    // Here I remove the event listener:
    rock.removeEventListener("click", onClick);
  } else if (computerScore === 3) {
    finalResult.textContent = "You Lost";
    // Same here
    rock.removeEventListener("click", onClick);
  }
}

// ...

Answer 2

正如@Antoine 所提到的，使用removeEventListener将回调与您的点击事件分离。 添加此答案只是为了展示这一点。

 function computerPlay(){ let values = ['Rock', 'Paper', 'Scissors'], valueToUse = values [Math.floor(Math.random()* values.length)]; return valueToUse; }; const rock = document.querySelector('#rock'); let player = document.querySelector('.playerScore', playerScore = 0); let computer = document.querySelector('.computerScore', computerScore = 0); let finalResult = document.querySelector('.finalResult'); rock.addEventListener('click', choose); function choose() { let comp = computerPlay() if (comp === 'Rock') { computer.textContent = `Computer Score: ${computerScore +=0}` player.textContent = `Your Score: ${playerScore +=0}` } else if (comp === 'Paper') { computer.textContent = `Computer Score: ${computerScore +=1}` player.textContent = `Your Score: ${playerScore +=0}` } else if (comp === 'Scissors') { computer.textContent = `Computer Score: ${computerScore +=0}` player.textContent = `Your Score: ${playerScore +=1}` } if (playerScore === 3){ finalResult.textContent = "You Won"; rock.removeEventListener("click", choose); } else if (computerScore === 3){ finalResult.textContent = "You Lost"; rock.removeEventListener("click", choose); } }

 <html> <head> <meta charset="utf-8"> <title>My javascript</title> <link rel="stylesheet" href="javascript.css"> </head> <body> <main> <div class="wrapper"> <h1>Rock, Paper, Scissors!</h1> <h2 id="choose">Choose:</h2> </div> <div class="container"> <img id="rock" src="https://static.thenounproject.com/png/477914-200.png"> </button> </div> <div class="wrapper"> <p class='computerScore'></p> <p class='playerScore'></p> </div> <div class="wrapper"> <p class='finalResult'></p> </div> </main> </html>

Answer 3

您可以使用 CSS 轻松做到这一点。 指针事件是帮助启用和禁用指针事件的 css 属性。

例如

If(condition) {
// for disable
document.getElementById('id').style.pointerEvent = 'none';   
else {
for enable
document.getElementById('id').style.pointerEvent = 'auto';
}

访问此链接了解更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

满足特定条件后如何禁用单击事件？

问题描述

3 个解决方案

解决方案1
5 已采纳 2020-09-09 04:55:20

解决方案2
2 2020-09-09 05:09:08

解决方案3
0 2020-09-09 05:15:03

满足特定条件后如何禁用单击事件？

问题描述

3 个解决方案

解决方案1 5 已采纳 2020-09-09 04:55:20

解决方案2 2 2020-09-09 05:09:08

解决方案3 0 2020-09-09 05:15:03

解决方案1
5 已采纳 2020-09-09 04:55:20

解决方案2
2 2020-09-09 05:09:08

解决方案3
0 2020-09-09 05:15:03