ReactJS SyntheticEvent stopPropagation only works with React events

Question

I m trying to use event stopPropagation   within a ReactJS component to stop a click event from bubbling up and triggering a click event that was attached with JQuery in legacy code  but it seems like React s stopPropagation   only stops propagation to events also attached in React  and JQuery s stopPropagation   doesn t stop propagation to events attached with React   Is there any way to make stopPropagation   work across these events   I wrote a simple JSFiddle to demonstrate these behaviors        jsx React DOM    var Propagation   React createClass       alert  function            alert  React Alert               stopPropagation  function e           e stopPropagation               render  function            return                lt div gt                   lt div onClick  this alert  gt                       lt a href     onClick  this stopPropagation  gt React Stop Propagation on React Event lt  a gt                   lt  div gt                   lt div className  alert  gt                       lt a href     onClick  this stopPropagation  gt React Stop Propagation on JQuery Event lt  a gt                   lt  div gt                   lt div onClick  this alert  gt                       lt a href     className  stop-propagation  gt JQuery Stop Propagation on React Event lt  a gt                   lt  div gt                   lt div className  alert  gt                       lt a href     className  stop-propagation  gt JQuery Stop Propagation on JQuery Event lt  a gt                   lt  div gt               lt  div gt                        React renderComponent  lt Propagation   gt   document body      function              document  on  click     alert   function e           alert  Jquery Alert                   document  on  click     stop-propagation   function e           e stopPropagation

User · Answer

Worth noting  from this issue  that if you re attaching events to document  e stopPropagation   isn t going to help  As a workaround  you can use window addEventListener   instead of document addEventListener  then event stopPropagation   will stop event from propagating to the window

User · Answer

I was able to resolve this by adding the following to my component   componentDidMount       ReactDOM findDOMNode this  addEventListener  click    event    gt        event stopPropagation         false

User · Answer

Update  You can now  lt Elem onClick   proxy   gt  proxy stopPropagation       gt

User · Answer

React 17 delegates events to root instead of document  which might solve the problem  More details here

User · Answer

It is still one intersting moment   ev preventDefault   ev stopPropagation    ev nativeEvent stopImmediatePropagation      Use this construction  if your function is wrapped by tag

User · Answer

I ran into this problem yesterday  so I created a React-friendly solution   Check out react-native-listener  It s working very well so far  Feedback appreciated

User · Answer

React uses event delegation with a single event listener on document for events that bubble  like  click  in this example  which means stopping propagation is not possible  the real event has already propagated by the time you interact with it in React  stopPropagation on React s synthetic event is possible because React handles propagation of synthetic events internally   Working JSFiddle with the fixes from below   React Stop Propagation on jQuery Event  Use Event stopImmediatePropagation to prevent your other  jQuery in this case  listeners on the root from being called  It is supported in IE9  and modern browsers   stopPropagation  function e       e stopPropagation        e nativeEvent stopImmediatePropagation          Caveat  Listeners are called in the order in which they are bound  React must be initialized before other code  jQuery here  for this to work    jQuery Stop Propagation on React Event  Your jQuery code uses event delegation as well  which means calling stopPropagation in the handler is not stopping anything  the event has already propagated to document  and React s listener will be triggered      Listener bound to  document   event delegation   document  on  click     stop-propagation   function e       e stopPropagation          To prevent propagation beyond the element  the listener must be bound to the element itself      Listener bound to   stop-propagation   no delegation     stop-propagation   on  click   function e       e stopPropagation          Edit  2016 01 14   Clarified that delegation is necessarily only used for events that bubble  For more details on event handling  React s source has descriptive comments  ReactBrowserEventEmitter js

User · Answer

A quick workaround is using window addEventListener instead of document addEventListener

User · Answer

From the React documentation  The event handlers below are triggered by an event in the bubbling phase  To register an event handler for the capture phase  append Capture   emphasis added   If you have a click event listener in your React code and you don t want it to bubble up  I think what you want to do is use onClickCapture instead of onClick  Then you would pass the event to the handler and do event nativeEvent stopPropagation   to keep the native event from bubbling up to a vanilla JS event listener  or anything that s not react

[javascript] ReactJS SyntheticEvent stopPropagation() only works with React events?

Examples related to javascript

Examples related to jquery

Examples related to reactjs