当我们在编写前端代码时，经常会遇到按钮点击事件（onclick）触发两次的问题。这种情况通常很难调试和解决，因为看起来代码没有任何问题。本文将详细介绍这个问题的原因，并提供一些解决方案。
问题分析
首先，我们需要了解在什么情况下会出现按钮点击事件触发两次的问题。这通常发生在使用 jQuery 或其他库的情况下，因为这些库经常使用事件代理机制来处理事件。事件代理机制是指将事件绑定到一个父元素上，然后在子元素上触发相应的事件。这样可以减少事件注册的数量，提高性能。
例如，以下代码：
<div id="parent"> <button class="btn">Click me</button> </div>
$('#parent').on('click', '.btn', function() {
console.log('Button clicked');
});在上面的代码中，我们将点击事件绑定到 #parent 元素上，并使用选择器 .btn 来匹配触发事件的元素。这里就容易出现问题，如果我们在按钮上同时绑定了 onclick 事件，那么点击按钮时，就会触发两次事件。
原因是，当你在按钮上点击时，首先会触发按钮自身的 onclick 事件，然后再冒泡到 #parent 元素上。在 #parent 上绑定的事件处理程序也会被触发，导致事件触发两次。
解决方案
有多种方法可以解决按钮点击事件触发两次的问题，以下是其中几种常用的方法：
1. 阻止事件冒泡
我们可以使用 event.stopPropagation() 方法来阻止事件冒泡，从而避免事件触发两次。修改上面的代码如下：
$('#parent').on('click', '.btn', function(event) {
event.stopPropagation();
console.log('Button clicked');
});在上面的代码中，我们添加了一个参数 event，它是事件对象。然后调用 event.stopPropagation() 方法阻止事件冒泡。
2. 取消默认行为
另一个解决方法是取消按钮的默认行为。当按钮被点击时，默认会执行其自身的行为，例如提交表单或重新加载页面。如果取消这个行为，就可以避免事件触发两次。
<button class="btn" type="button">Click me</button>
$('.btn').on('click', function(event) {
event.preventDefault();
console.log('Button clicked');
});在上面的代码中，我们将按钮的 type 属性设置为 button，这样就可以取消按钮默认的行为。然后在点击事件处理程序中，使用 event.preventDefault() 方法取消默认行为。
3. 使用原生事件绑定方式
如果使用 jQuery 等库绑定事件容易出现事件委托机制问题，那可以考虑使用原生的 JavaScript 事件绑定方法 addEventListener()。
<div id="parent"> <button class="btn">Click me</button> </div>
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target.classList.contains('btn')) {
console.log('Button clicked');
}
});在上面的代码中，我们使用了原生的 addEventListener() 方法来绑定点击事件。然后在事件处理程序中，判断触发事件的元素是否为按钮，如果是则执行相应的代码。这样就不会出现事件委托机制造成的事件触发两次问题。
总结
本文详细介绍了按钮点击事件触发两次的问题，并提供了多种解
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30374