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

Question

我有一个 ID 为 "myButton" 的按钮，当我点击它时，它应该每次将 ID 为 "clickCount" 的跨度中的计数增加 1，另一个按钮的 ID 为 "deactivate"，当单击它应该不再允许计数增加，即使单击了 id "myButton" 的按钮，我可以管理计数的增加，但不知道如何在不禁用第一个按钮的情况下停止计数增加.

HTML

<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>

Javascript

let 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

当另一个按钮被点击时，从 #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>

Answer 2

您可以添加一个 boolean，它在停用时变为 true，当它为 false 时允许递增：

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>

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

How to prevent a click event on a button from triggering by using another button in javascript?

html

javascript

dom

event-handling