为什么我的removeEventListener不起作用？

Question

My javascript code, thanks in advance (let me know if you need the html too but its basically the tags, it's a game where the players just click until it reaches a certain number, and whoever reaches first wins. I'm trying to stop the other player from clicking if the game has already been won: 我的JavaScript代码，在此先谢谢您（让我知道您是否也需要html，但基本上是标签，这是一个游戏，玩家只需单击鼠标直至达到一定数量，然后首先获得胜利的人就可以了。另一名玩家点击是否赢得了比赛：

var player1Score=0;
var player2Score=0;

function p1Function(){

if(player1Score==document.querySelector("input").value)
   return;

++player1Score;
document.querySelector("#pOneScore").innerHTML=player1Score.toString();

if(player1Score==document.querySelector("input").value)
    document.querySelector("#pOneScore").style.color="green";
}

function p2Function(){

if(player2Score==document.querySelector("input").value)
{
    document.querySelector(".playerOne").removeEventListener("click",    
    p1Function);
    return;
}
player2Score++;
document.querySelector("#pTwoScore").innerHTML=player2Score.toString();

if(player2Score==document.querySelector("input").value)
    document.querySelector("#pTwoScore").style.color="green";
}

function resetFunction(){
    document.querySelector("input").value=5;
    document.querySelector("#pOneScore").style.color="black";
    document.querySelector("#pTwoScore").style.color="black";
    player1Score=0;
    player2Score=0;
    document.querySelector("#pOneScore").innerHTML=player1Score.toString();
    document.querySelector("#pTwoScore").innerHTML=player2Score.toString();
}


document.querySelector(".playerOne").addEventListener("click", p1Function);
document.querySelector(".playerTwo").addEventListener("click", p2Function);
document.querySelector(".reset").addEventListener("click", resetFunction);

Here is the HTML code as requested: 这是请求的HTML代码：

<body>
<strong><span id="pOneScore">0</span> to <span id="pTwoScore">0</span>
</strong>
<br>
<br>
<p>Playing To:</p> <span id="playing_to"></span>

<input type="text" name="score" value="5"></input>
<button class="playerOne">Player One</button>
<button class="playerTwo">Player Two</button>
<button class="reset">Reset</button>

<script src="scorekeeper_js"></script>
</body>

Answer 1

You didn't remove listener in one of your onclick functions. 您没有在其中一个onclick函数中删除侦听器。

function p1Function() {
  var maxScore = document.querySelector("input").value;

  player1Score++;

  if (player1Score == maxScore) {
    document.querySelector("#pOneScore").style.color = "green";
    document.querySelector(".playerTwo").removeEventListener("click",
      p2Function);
    document.querySelector("#pOneScore").innerHTML = player1Score.toString();
  } else if (player1Score < maxScore) {
    document.querySelector("#pOneScore").style.color = "black";
    document.querySelector("#pOneScore").innerHTML = player1Score.toString();
  }
}
function p2Function() {
  var maxScore = document.querySelector("input").value;

  player2Score++;
  if (player2Score == maxScore) {
    document.querySelector("#pTwoScore").style.color = "green";
    document.querySelector(".playerOne").removeEventListener("click",
      p1Function);
    document.querySelector("#pTwoScore").innerHTML = player2Score.toString();
  } else if (player2Score < maxScore) {
    document.querySelector("#pTwoScore").style.color = "black";
    document.querySelector("#pTwoScore").innerHTML = player2Score.toString();
  }
}

You also have to add listeners back in reset() : 您还必须在reset()添加侦听器：

function resetFunction() {
...
  document.querySelector(".playerOne").addEventListener("click", p1Function);
  document.querySelector(".playerTwo").addEventListener("click", p2Function);
}

Here is working jsfiddle code: https://jsfiddle.net/1we2ydza/1/ 这是有效的jsfiddle代码： https ://jsfiddle.net/1we2ydza/1/

Answer 2

Check it now 现在检查

 var player1Score=0; var player2Score=0; function p1Function(){ if(player1Score==parseInt(document.querySelector("input").value)){ document.querySelector(".playerTwo").removeEventListener("click", p2Function); return; } ++player1Score; document.querySelector("#pOneScore").innerHTML=player1Score.toString(); if(player1Score==document.querySelector("input").value) document.querySelector("#pOneScore").style.color="green"; } function p2Function(){ if(player2Score==parseInt(document.querySelector("input").value)) { document.querySelector(".playerOne").removeEventListener("click", p1Function); return; } player2Score++; document.querySelector("#pTwoScore").innerHTML=player2Score.toString(); if(player2Score==document.querySelector("input").value) document.querySelector("#pTwoScore").style.color="green"; } function resetFunction(){ document.querySelector("input").value=5; document.querySelector("#pOneScore").style.color="black"; document.querySelector("#pTwoScore").style.color="black"; player1Score=0; player2Score=0; document.querySelector(".playerOne").addEventListener("click", p1Function); document.querySelector(".playerTwo").addEventListener("click", p2Function); document.querySelector("#pOneScore").innerHTML=player1Score.toString(); document.querySelector("#pTwoScore").innerHTML=player2Score.toString(); } document.querySelector(".playerOne").addEventListener("click", p1Function); document.querySelector(".playerTwo").addEventListener("click", p2Function); document.querySelector(".reset").addEventListener("click", resetFunction);

 <body> <strong><span id="pOneScore">0</span> to <span id="pTwoScore">0</span> </strong> <br> <br> <p>Playing To:</p> <span id="playing_to"></span> <input type="text" name="score" value="5" /> <button class="playerOne">Player One</button> <button class="playerTwo">Player Two</button> <button class="reset">Reset</button> <script src="scorekeeper_js"></script> </body>

Answer 3

Once the 1st person clicks the 5, times then in the person one handler, the click handler for person two was not removed. 一旦第一个人单击5次，然后在一个人处理程序中，第二个人的单击处理程序未删除。 Hence the person two was able to click. 因此，第二个人可以单击。 I think you hand missed to remove the click in 'p1Function()'. 我认为您错过了删除“ p1Function（）”中单击的机会。 Adding the below lines in 'p1Function()' would solve your problem: 在“ p1Function（）”中添加以下几行将解决您的问题：

if(player1Score==document.querySelector("input").value)
{
    document.querySelector(".playerTwo").removeEventListener("click",    
    p2Function);
    return;
}

为什么我的removeEventListener不起作用？

问题描述

3 个解决方案

解决方案1
1 2017-02-10 06:42:16

解决方案2
0 已采纳 2017-02-10 06:36:42

解决方案3
0 2017-02-10 06:53:02

为什么我的removeEventListener不起作用？

问题描述

3 个解决方案

解决方案1 1 2017-02-10 06:42:16

解决方案2 0 已采纳 2017-02-10 06:36:42

解决方案3 0 2017-02-10 06:53:02

解决方案1
1 2017-02-10 06:42:16

解决方案2
0 已采纳 2017-02-10 06:36:42

解决方案3
0 2017-02-10 06:53:02