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>

标签： javascriptjqueryreactjs

Answer 1

使用事件停止传播可以防止事件进一步冒泡到 DOM 中。这是样本