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

Question

Image this structure:

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

Menu component itself has an event handling logic: it is listening to click events on window and closes menu items. This is done because one page can have many menus, and opening one should close all others.

The whole parent Item component must also be clickable. A div inside the Item component (marked as "addition") must be independent - so it can be a menu, but can also be anything else - just a text e.g.

The problem here is that clicking on Menu's button click event is being bubbled to Item and down the line, though Item's onClick is also fired. If propagation is stopped inside the Menu' onClick - then Item's onClick is not fired anymore but also window.onClick is stopped too, and other menus cannot be then closed.

What would be a solution to this? How could I stop on onClick for Item but not anything else down the line?

Answer 1

To solve the issue I had to stop bubbling when Menu button (or any other area within Menu component) is clicked, and use capturing instead of bubbling inside the Menu to do "close menu on window click outside of component".