How does one stop propagation of event to a global listener in a React component?

Question

I have a component that should listen all mousedown events on my page

document.addEventListener('mousedown', listener)

Now let's suppose I have a button in my React app

<button 
  onMouseDown={e => e.stopPropagation()}
  onClick={e => doSomething()}
/>

Using onMouseDown={e => e.stopPropagation()} will not prevent my global mousedown listener to be triggered, because React uses event delegation (I suppose?)

The only way to make it work is to call onMouseDown={e => e.nativeEvent.stopImmediatePropagation()}

Is there any way to make this more natural from a developer perspective? I mean it's not very convenient to have to explain to everyone of a large team why regular e.stopPropagation() does not work, how event delegation works etc...

So, is there anything I can do so that when calling e.stopPropagation() it actually does not trigger my main mousedown listener?

Is there a supported way, from my listener, to filter events on which stopPropagation was called (by React or not?)

Is there a way to change the node on which React handle the delegated events? (it seems to be document here)

Have you seen this question - http://stackoverflow.com/q/24415631/5157454? — Ori Drori, Dec 07 '16 at 12:30
yes it just explains how event delegation works but does not give a solution to my problem — Sebastien Lorber, Dec 07 '16 at 14:28
I would also like to know what are the best practices for using events to the document in React — Amalin, Jun 19 '17 at 13:55

How does one stop propagation of event to a global listener in a React component?

0 Answers0