Embla-carousel: Prevent click event on child element when dragging

[alexcoroza]

I created a carousel and added my custom clickable elements inside. The problem is when I drag the carousel and then I mouseup, click event is triggered which is not the desired action.

[davidcetinkaya]

Hi Alex (@alexcoroza),

Thanks for taking time to open this issue. Would you mind forking this CodeSandbox to demonstrate the issue and what you want to achieve? It's much easier for me to troubleshoot and help you that way. Thank you for your patience.

Kindly,
David

[alexcoroza]

Oooh, Didnt expect this, you responded so quick. Here is the example scenario:

Sample Code

When you drag to change slides and then you mouseup on top of a slide, the click event is triggered. Actually Im using this library in my angular app so the sample codes in sandbox is quite different(but they show the same problem).

I tried many javascript drag scroll carousel libraries they have all this kind of issue except for the ngx-drag-scroll(though its laggy). As of now I'm just showing an inivisible overlay whenever .on('scrolling') is called then hide it when finished, just to prevent the child element's click event

[davidcetinkaya]

Hello Alex (@alexcoroza),

Thank you for the sample code 👍. Just want to make sure that I understand you correctly before we start discussing how to solve this issue:

1. Do you want to prevent the click event from triggering if dragging has occurred?
2. Or do you actually want to prevent the click event from triggering if carousel is scrolling?

All the best,
David

[alexcoroza]

Yes the question 1. I just want to prevent the click event only when dragging.

[davidcetinkaya]

Hello Alex (@alexcoroza),
I'm happy to announce that I've released a click check for Embla 🎉:

embla.clickAllowed()

Please read about it in the release description. You can see it in action in this CodeSandbox. This method is an opt-in feature and here is how it works: It returns false if:

Mouse Pointers

• Mouse drags the carousel.

Touch Pointers

• Touch drags the carousel.
• Carousel is in motion (i.e. is scrolling).

Otherwise it will return true. Try v2.6.1 for this feature. I'd very much appreciate your feedback on this and if it solves your issue. Thank you in advance!

Kindly,
David

[davidcetinkaya]

Hi Alex (@alexcoroza),

I’m curious if you’ve had the chance to try this yet?

Kindly,
David

[davidcetinkaya]

Hello again Alex (@alexcoroza),
I'm closing this due to lack of response. Feel free to reopen this issue if you don't think it's resolved.

Thank you for your feature request!
David

[coopemor]

Hey @davidcetinkaya this is exactly what I need but I'm struggling to figure out how to implement it while using the react version. Any chance you could provide a bit of guidance?

Thanks so much for you hard work in this, it has the smoothest animations I've found for a carousel library!

[davidcetinkaya]

Hi @coopemor,

I would be happy to help. In order to do so I need additional details. Are you using React hooks or class based components?

Kindly,
David

[coopemor]

Amazing! Thank you @davidcetinkaya I'm using hooks in my design.

[davidcetinkaya]

Hello @coopemor,

Your question is related to the Embla Carousel React, so I decided to create a new issue there. Just follow this link and we'll continue this conversation there.

Thanks!
David