JavaScript 解决 onClick 穿透

在 JavaScript 中处理 onClick 事件穿透问题时，可以通过以下方法来阻止事件的传播和默认行为：

1. 阻止事件冒泡：使用 e.stopPropagation() 方法可以阻止事件向上冒泡到父元素。
2. 阻止默认行为：使用 e.preventDefault() 方法可以阻止事件的默认行为。

具体应用场景

• 阻止事件冒泡：当你点击一个子元素时，不希望这个点击事件传递给父元素，可以使用 e.stopPropagation()。
• 阻止默认行为：例如，点击一个链接时，默认会跳转到新的页面，如果你不想让这个跳转发生，可以使用 e.preventDefault()。

示例

假设你有一个按钮，点击按钮时希望阻止其父元素的点击事件：

<div onClick={() => console.log('Parent clicked')}>
  父元素
  <button onClick={e => {
    e.stopPropagation(); // 阻止事件冒泡
    e.preventDefault();  // 阻止默认行为
    console.log('Button clicked');
  }}>
    点击按钮
  </button>
</div>

在这个例子中，点击按钮时只会输出 "Button clicked"，而不会触发父元素的点击事件

注意事项

e.stopPropagation() 只会阻止事件向上冒泡，不会影响其他同级或子级元素的事件。

e.preventDefault() 只会阻止当前事件的默认行为，不会影响事件的传播。 希望这些信息对你有帮助！如果有其他问题，请随时提问。