CODEWITHSUNDEEP
javascriptreactjs
joe-re
joe-re

Reputation: 78

Could I catch React SyntheticEvent before Native DOM Event?

I'm trying to catch React component's SyntheticEvent on native DOM element.

https://jsfiddle.net/xwh6dyur/2/

This code generate following DOM elements.

<div id="not-react-dom-outer">
  <div id="not-react-dom-inner">
    <div id="container">
      <div data-reactid=".0">
        <button data-reactid=".0.0">react button</button>
      </div>
    </div>
  </div>
</div>

I expected event order below in accordance with normal Event bubbling.

  1. button(react component)
  2. div#not-react-dom-inner
  3. div#not-react-dom-outer

but, actually is below.

  1. div#not-react-dom-inner
  2. div#not-react-dom-outer
  3. button(react component)

I want to catch React SyntheticEvent before Native DOM Event.
Are there any good methodologies for that?

Upvotes: 0

Views: 515

Answers (1)

Eelke
Eelke

Reputation: 2327

The React event handler isn't actually bound to button, the event handler listening at the root of the React document, that's why the order in which these callbacks fire might not be as expected.

Upvotes: 1

Related Questions