如何在javascript中使用另一个按钮来防止按钮上的点击事件触发？

Question

我有一个带有id“myButton”的按钮，当点击它时，它应该每次增加id“clickCount”的span中的计数1，另一个按钮有一个id“deactivate”，当点击时，它应该不再允许计数的增加，即使点击id为“myButton”的按钮，我可以管理到计数的增加， 但不知道如何在不禁用第一个按钮的情况下阻止计数增加。断续器<button id="myButton">Click me!</button><p>You clicked on the button <span id="clickCount">0</span> times</p><button id="deactivate">Désactivate counting</button>Javascriptlet myButton = document.getElementById('myButton');let newCount = document.getElementById('clickCount');let deact = document.getElementById('deactivate');let count = 0; myButton.addEventListener("click", function() { count++; newCount.innerText = count;});

Answer 1

您可以添加 在停用时更改为 true 的 ，并在它为 false 时允许递增：boolean

let myButton = document.getElementById('myButton');

let newCount = document.getElementById('clickCount');

let deact = document.getElementById('deactivate');

let count = 0;

let deactivated = false;

deact.addEventListener("click", function(){

     deactivated = true;

});

myButton.addEventListener("click", function() {

     if(!deactivated){

          count++;

          newCount.innerText = count;

     }

});

<button id="myButton">Click me!</button>

<p>You clicked on the button <span id="clickCount">0</span> times</p>

<button id="deactivate">Désactivate counting</button>

Answer 2

从单击其他按钮时删除事件侦听器#myButton

let myButton = document.getElementById('myButton');

let newCount = document.getElementById('clickCount');

let deact = document.getElementById('deactivate');

let count = 0;

function handler() {

  count++;

  newCount.innerText = count;

}

myButton.addEventListener('click', handler);

deact.addEventListener('click', () => myButton.removeEventListener('click', handler));

<button id="myButton">Click me!</button>

<p>You clicked on the button <span id="clickCount">0</span> times</p>

<button id="deactivate">Désactivate counting</button>