Cannot stop event bubbling?

[magikarp28]

Hello.
I'm making an openable image gallery that uses react modal to open a copy of an image that can be dragged around and scaled with pinch.

Everything works great except that the onDrag event gets registered both on my opened image and the gallery(as it can be navigated by dragging).
event.stopPropagation() does not seem to do anything.

Here is my code for the gestures:

useGesture(
      {
        onDrag: ({ pinching, cancel, event, offset: [x, y] }) => {
          event.stopPropagation();
          if (pinching) return cancel()
          api.start({ x, y })
          
        },
        onPinch: ({ offset: [d, a] }) => {
          let adjustedScale = 1 + d/140
          api.start({ scale: adjustedScale, rotateZ: a})
        },
      },
      {
        pinch: {
          distanceBounds: { min: -40, max: 200 }
        },
        drag: {
          bounds: { left: -leftBarrier, right: rightBarrier, top: -topBarrier, bottom: bottomBarrier },
        },
        domTarget: ref
      }
    );

[dbismut]

I'm pretty sure the drag you're seeing on the image is the native drag and drop from the browser which you won't disable with stopPropagation. There's a few things you could do, like trying to event.preventDefault() (but with eventOptions.capture set to true).

Simplest solution would probably be to have the css pointer-events: none on your image element.

But that's hard to assess without a sandbox: giving a minimal sandbox in your issues / questions simplifies answers drastically.

Also, you can try upgrading to @use-gesture/react which will release shortly (in that case, make sure your rename domTarget to target.

[magikarp28]

Thank you very much for the swift reply.
It is not the browser image drag or anything like that.

I have made a sandbox (as simplified as I could) to demonstrate the problem:
https://codesandbox.io/s/slieder-and-move-gesture-problem-udsef?file=/src/OpenedComponent.js

I used pure-react-carousel for the slider but the issue is present when using other slider components.

[dbismut]

Oh ok so I framed the problem wrong.
Have a look at: https://codesandbox.io/s/slieder-and-move-gesture-problem-forked-j9r8i

The problem here is that pure-react-carousel doesn't use PointerEvents (or at least not by default), and uses MouseEvents instead, where instead use-gesture uses PointerEvents. So stopping propagation in use-gesture will stop pointerdown events from propagating, but not mousedown.

In the solution above, by using useGesture that supports native handlers, I was able to stopPropagation on mousedown events, resulting in effectively disabling pure-react-carousel.

Now, you should have a look at Embla Carousel, which has a React version. IMO it's the best carousel around here.

Also, you'll notice that with pure-react-carousel, you're unintentionally triggering the opening of the slide while just dragging the carousel, as the carousel drag handled by pure-react-carousel eventually gets caught as a mouseclick event when the gesture is released, thus opening the slide. This is a problem that Embla offers to solve, (and which is also something that @use-gesture solves with the filterTaps option by the way).

Hope this helps.

[magikarp28]

Interestingly while stopping event propagation on mousedown does seem to work fine with a mouse it does not fix the problem on a touchscreen.

Embla however works flawlessly from the start so I will be using that.

Many thanks for all the help!

[dbismut]

Obviously you would need to add stopPropagation to onTouchStart as well! Glad your found the solution with Embla though, and you can mark the question as answered I guess ;)

EDIT: oh it was already marked as answered sorry, just noticed.

[magikarp28]

Oh yes I should have mentioned i used stopPropagation on onTouchStart and that didn't work either.
But yes as far as I'm concerned the question is answered lol