Bug: Manually added event listener always triggered

[teamreactwts]

React version: 18.0.0

Steps To Reproduce

1. open the sandbox link.
2. open console.
3. click on the child text you can see on console there is two log manually added listener and also the react synthetic event.

Link to code example:

https://codesandbox.io/p/sandbox/event-bubble-m7x98y

The current behavior

It always triggers both event if I click on the child text, it triggers manually added parent eventlistener. It should only trigger the onPointerDown event not the parent. I tried to stop the event bubbling using event.stopPropagation() still no success.

Also tried using

new Event("pointerdown",{
bubbles:false,
}) 

but the event is not emitted to child.

The expected behavior

If i click on the child text it should only trigger its onPointerDown event not the parent event.

[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.