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

标签 javascript jquery reactjs

我开发了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>

最佳答案

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

关于javascript - 防止或处理同一部分中子标签和父标签的点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59528127/

相关文章:

javascript - 如何在以下 Javascript 函数中向 Closure 编译器注释我对 "this"的使用?

jquery - 无法弄清楚为什么数据表中的 sScrollY 会破坏列的大小和对齐方式

javascript - React-Bootstrap 设置 FormControl Select 的值

css - 垂直位置的 react-responsive-carousel control-dots

javascript - React 代码锁定在无限循环中 - 不涉及 while 循环

javascript - 我可以在 React + Redux 中使用 Props 设置初始状态吗?

javascript - 使用 Jasmine 进行单元测试时模拟全局对象

javascript - SAPUI5 表 : unbindRows & destroyColumns cause error: Cannot read property 'shouldRender' of undefined

Javascript、jQuery.extend 和 "new"

jQuery TreeView : programmatically open a branch