javascript -鼠标单击父元素，但阻止其子元素触发事件

基础概念

在JavaScript中，事件冒泡（Event Bubbling）是指当一个元素上的事件被触发时，该事件会从该元素开始，逐级向上传播到它的父元素，直到传播到根元素（通常是document或window）。如果你单击一个父元素，但希望阻止其子元素触发事件，你可以使用事件冒泡的特性来实现。

相关优势

• 代码复用：通过阻止事件冒泡，可以避免在每个子元素上重复绑定事件处理程序，从而提高代码的复用性。
• 性能优化：减少事件处理程序的数量可以提高页面的性能。

类型

• 事件捕获：事件从根元素开始，逐级向下传播到目标元素。
• 事件冒泡：事件从目标元素开始，逐级向上传播到根元素。

应用场景

• 表单验证：在父元素上绑定事件处理程序，阻止子元素的默认行为。
• 弹出菜单：点击父元素显示菜单，点击子元素不关闭菜单。

问题与解决方法

问题

当你单击父元素时，子元素的事件也被触发。

原因

事件冒泡导致子元素的事件被触发。

解决方法

使用event.stopPropagation()方法阻止事件冒泡。

// HTML
<div id="parent">
  父元素
  <div id="child">子元素</div>
</div>

// JavaScript
document.getElementById('parent').addEventListener('click', function(event) {
  console.log('父元素被点击');
});

document.getElementById('child').addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件冒泡
  console.log('子元素被点击');
});

参考链接

• MDN Web Docs: Event.stopPropagation()

通过上述代码，当你单击父元素时，只会触发父元素的事件处理程序，而不会触发子元素的事件处理程序。这样可以有效地阻止事件冒泡，确保只有父元素的事件被触发。