在 DOM 树中间停止 React "onClick" 事件

Question

图像结构：

<Item onClick={goToPage}>
  <p>Example Title</p>
  <div> // addition
    <Menu>
      <button onClick={toggleMenuItems}/>
      <MenuItems />
    </Menu>
  </div>
</Item>

菜单组件本身有一个事件处理逻辑：它监听 window 上的点击事件并关闭菜单项。这样做是因为一个页面可以有多个菜单，打开一个应该关闭所有其他菜单。

整个父项组件也必须是可点击的。 Item 组件中的 div（标记为 "addition"）必须是独立的 - 因此它可以是菜单，但也可以是其他任何东西 - 只是文本，例如

这里的问题是，尽管 Item 的 onClick 也被触发，但点击 Menu 的按钮点击事件被冒泡到 Item 并沿着线向下。如果传播在菜单的 onClick 内停止 - 然后 Item 的 onClick 不再被触发，而且 window.onClick 也停止，并且其他菜单无法关闭。

有什么解决办法？我怎么能停止 onClick for Item 而不是其他任何东西？

Answer 1

使用此解决方案检测点击是在组件内部还是外部：

然后仅当在内部单击时才应用您的逻辑。

Answer 2

为了解决这个问题，我不得不在单击菜单按钮（或菜单组件内的任何其他区域）时停止冒泡，并使用捕获而不是在菜单内冒泡来完成 "close menu on window click outside of component"。

在 DOM 树中间停止 React "onClick" 事件

Stop React "onClick" event in the middle of DOM tree

events

dom

event-propagation

stoppropagation

reactjs