React: onWheel Stop bubbling is not happening.

[aseem2625]

My Target: I am having a div which scrolls. But on coming to the top or the bottom after the scrolling the div, the scrolling starts happening on the entire page itself which I don't want. I think it's happening due to event propagation, so I am trying to stop in following manner.

My Implementation: I am using "extends Component (es6 way)" to create my components. And I've put onWheel event listener as

return (
  <div className='scroll-box-list' onWheel = {(e)=>{console.log('Scrolling Me..'); e.stopPropagation();}}>
      <OtherThings />
  </div>
);

It's consoling out 'Scrolling Me' fine but I am not able to stop propagating this event to the parent.
Not sure why stopPropagation is not happening exactly or whether this issue is happening because of propagation

I don't want to use libraries which used mixins, so please don't suggest me this way.

[jimfb]

stopPropagation appears to be working for me: http://jsfiddle.net/o2c6tt7c/

This looks like a usage question, rather than a bug in the React core. Usage questions are better answered on sites like StackOverflow, as we try to use github issues for tracking bugs in the React core. For this reason, I'm going to close out this issue, but feel free to continue the conversation here or move it to StackOverflow.

If you can provide a fiddle that demonstrates a bug in the core, we can re-investigate.

[aseem2625]

Hi @jimfb

Your jsfiddle code didn't seem to implement what I asked.
Here is my link.
http://jsfiddle.net/vmvrphjn/

I asked the question here, thought it would be a bug!

But anyways, I've asked the question here at stackoverflow also.
http://stackoverflow.com/questions/34790949/react-js-onwheel-bubbling-stoppropagation-not-working

Thanks

[jimfb]

My fiddle was demonstrating that stopPropagation does work for the child/parent relationship.

I think you might be confused about what stopPropagation does and doesn't do. stopPropagation does not prevent the browser from responding to an event: http://jsfiddle.net/rajo091h/

You might be able to do something with preventDefault, but it's not entirely obvious what that logic would be (maybe "if is scrolled to bottom of child, prevent default"). Regardless, it's clearly a usage question and not a React bug at this point.

[aseem2625]

With this we both are saying same thing.

stopPropagation does not prevent the browser from responding to an event: http://jsfiddle.net/rajo091h/

but then what exactly stopPropagation is needed for when it's not stopping!!

I think stopPropagation should avoid the event bubbling to the parent!
In fact, in your code if I remove e.stopPropagation, it really won't make any difference so I think what you wrote in the code didn't demonstrated anything. Can you please clarify me on this.

For my particular usage, I am trying things. Thanks @jimfb

[jimfb]

@aseem2625 The second fiddle I provided does not use React, but exhibits the same behavior, so I don't think it's a React core issue. stopPropagation should follow the spec (https://goo.gl/6MyhXy). It should do nothing more, and nothing less. In this case, I think we're doing the right thing, but if the behavior is different from Chrome without React, let us know and we can re-investigate!

We generally don't help with usage questions on github, since it's the wrong medium. We use github issues for tracking bugs in the React core. Every minute we spend debugging usage questions is one fewer minutes we can spend fixing React to make it better for everyone - which is why we generally redirect all usage questions to StackOverflow. StackOverflow is a much better place for questions, clarifications, etc. Sorry, but I hope you can sympathize the reasoning here!

Good luck with your project!

[rickitan]

Hi @aseem2625,

I'm seeing the exact same issue you experienced. Stopping propagation from the child doesn't not prevent the parent from picking the event. Contrary to what your http://jsfiddle.net/rajo091h/ shows.

Did you find a solution for it? I don't get how the StackOverflow answer fixes it.

Thanks!

[aseem2625]

@rickitan
Try this eve.nativeEvent.stopImmediatePropagation();
It's because reactjs implements events as synthetic events.

[monkindey]

Hi , I used the event.preventDefault in React and it can work, The demo https://jsfiddle.net/monkindey/9kobyd2w/, I extract the logic code to be a npm package and it may be easy to use.

Hope it helps.

[rickitan]

Hi @aseem2625 and @monkindey,

Thanks for the help. That demo does work for me @monkindey.

I went over my codebase and found out that the issue is that the components are under different trees. This is due to an ongoing migration from backbone to React, so they don't have the same root. Therefore, stopping the propagation on one doesn't prevent the other from being ran.

Thank you so much!

[thomasjm]

I hit this issue too, and eventually found this blog post explaining the root cause: https://medium.com/@ericclemmons/react-event-preventdefault-78c28c950e46

Using the nativeEvent didn't work for me either, but it did work to use a ref on the element and manually do ref.current.addEventListener("wheel", (event) => event.stopPropagation())