Bug: Manually added event listener always triggered about react

[gchust]

@teamreactwts
This is not a bug, this is because react's PointerDown is different from the browser's native dom event.

Your parent component's event listener was added by the native addEventListner function, but your child component's event is a react's SyntheticEvent which is added by onPointerDown.

It is just like that your parent and child components are in different event cycles.

Changing your parent component to something like the following will fix your issue.

    <div onPointerDown={handlePointerDown2}>
      Parent
      <ChildComponent />
    </div>

[Syed-Bilal-Haider-Engineer]

@teamreactwts Method explanation, your code, and a correct alternative snippet.

<>
    <div ref={containerRef}>
      Parent
    </div>
    <ChildComponent />
</>

 <>
    <div ref={containerRef}>
      Parent
    <ChildComponent />
    </div>
</>

It is not a bug, the difference in behavior between these two code snippets lies in the structure of the JSX elements and their relationship to the parent <div> element:

1. In the first snippet, the <**ChildComponent** /> is rendered outside of the parent <div>.
2. In the second snippet, the <**ChildComponent** /> is rendered inside the parent <div>.

The difference in behavior when clicking lies in event propagation and event delegation:

3. In the first snippet, if you click on the <**ChildComponent** />, the event bubbles up to the parent <div> before reaching the document.
4. In the second snippet, the event only reaches the parent <div> when you click inside it or on its children. If you click on the <**ChildComponent** />, the event doesn't bubble up beyond it.

This difference in event propagation can affect event handling and behavior based on where you click within the rendered components:

5. In the first snippet, clicking anywhere within the rendered area may trigger events associated with the parent <div>.
6. In the second snippet, clicking outside of the parent <div> won't trigger events associated with it, unless it's specifically targeted.