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

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

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

Answer 2

使用 event.stopPropogation() 防止事件冒泡到父级。

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

react 与 vanilla js 略有不同，您可以在此处查看： https : //reactjs.org/docs/handling-events.html