在前端开发中，经常会遇到一个问题：当我们点击子元素时，父元素的点击事件也会被触发。这种情况可能会导致一些意外的行为和错误，因此我们需要了解它的原因和解决方法。
产生原因
子元素的点击事件触发了父元素的点击事件，是因为事件冒泡机制（Event Bubbling）导致的。当一个元素上发生了某个事件，比如点击事件，它会先执行该元素自身的事件处理函数，然后再沿着 DOM 树向上逐级传递，直到传递到窗口对象。在这个过程中，如果父元素注册了相同类型的事件处理函数，它就会被执行，这样子元素的事件就会冒泡到父元素。
解决方法
要解决子元素点击事件触发父元素点击事件的问题，有以下几种方法：
方法一：stopPropagation()
在子元素的点击事件处理函数中调用 event.stopPropagation() 方法可以阻止事件继续向父元素传递，从而避免父元素的事件被触发。
-- -------------------- ---- ------- ----- ------------ - --------------------------------- ----- ------------- - ---------------------------------- -------------------------------------- --------------- - ------------------ ------- ---------- ------------------------ --- --------------------------------------- --------------- - ------------------- ------- ---------- ---
方法二：事件委托
事件委托是指将事件处理函数绑定在父元素上，而不是绑定在子元素上。当子元素触发事件时，事件会冒泡到父元素并被父元素捕获执行。
<div id="parent"> <button class="child">Button 1</button> <button class="child">Button 2</button> <button class="child">Button 3</button> </div>
const parentElement = document.querySelector('#parent');
parentElement.addEventListener('click', function(event) {
if (event.target.classList.contains('child')) {
console.log(`Child button ${event.target.textContent} clicked`);
}
});方法三：使用 CSS pointer-events 属性
CSS 的 pointer-events 属性可以控制元素是否接收鼠标事件。将父元素的 pointer-events 属性设为 none 可以使它失去接收鼠标事件的能力，从而避免触发点击事件。
<div id="parent" style="pointer-events: none;"> <button id="child">Button</button> </div>
方法四：使用事件代理库
如果我们需要对多个元素进行事件委托，或者需要在复杂的场景中使用事件委托，可以考虑使用事件代理库，如 jQuery、Zepto 等。这些库提供了更方便、更高效的事件委托方法，可以减少代码量和复杂度。
总结
子元素点击事件触发父元素点击事件是由事件冒泡机制引起的。我们可以使用 event.stopPropagation() 方法、事件委托、CSS 的 pointer-events 属性或者事件代理库来解决这个问题。选择不同的方法取决于具体的场景和需求。了解和掌握这些方法，可以帮助我们避免一些不必要的错误和问题，在开发中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25661