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

【问题标题】：How to prevent a click event on a button from triggering by using another button in javascript?如何防止在 javascript 中使用另一个按钮触发按钮上的单击事件？
【发布时间】：2020-05-19 21:09:27
【问题描述】：

我有一个 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;
});

【问题讨论】：

你可以在按钮中添加一个事件监听器来控制计数器按钮是否被禁用。
您是否考虑过在点击deactivate 时停用myButton？
我必须在不禁用“myButton”按钮的情况下这样做。

标签： javascript html dom event-handling

【解决方案1】：

您可以添加一个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>

【讨论】：

【解决方案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>

【讨论】：