javascript - 防止或处理同一部分中子标签和父标签的点击事件

Question

我开发了onclick功能，无论标签的点击如何，它都会执行特定的操作，似乎当我点击子标签或子点击事件时，会自动触发其相关的父点击事件。

需要阻止事件或处理与特定标签相关的事件被点击。

我想要的是，当点击父标签时，只有父标签的 onclick 函数应该被触发，如果子标签被点击，那么只有子标签的 onclick 事件应该被触发.

使用react应用程序(reactjs)开发相同的功能，但结果是相同的，无法单独处理onclick事件。

<div onClick="console.log('div tag click event fired')">
  <h1 onClick="console.log('h1 tag click event fired')">This is a Heading</h1>
  <p onClick="console.log('p tag click event fired')">This is a paragraph.</p>
<div>

Answer 1

使用 Event stop propagation防止事件进一步向上冒泡到 DOM 中。这是sample