Vue-carousel: Bug: events are propagating outside of the carousel

[hudy1]

Hi,

Firstly, thanks for this very nice component :)

I'd like to have input range inside draggable carousel. But it's _impossible to use these inputs because on drag carousel moves to previous / next slide_. Can I somehow control when to swipe carousel or not? Disabling drag functionality for carousel is not an option for me, unfortunately.

jsfiddle

Thanks for any help :)

[quinnlangille]

Hey @hudy1, I was working on the repro for this last week and forgot to reply! This is definitely an issue with event propagation - I tried a few things on the client side but it looks like we'll need to add support in the carousel itself.

I can look into a fix when I get some time - if anyone else gets a chance to take a look, I think the solution could be as simple as adding e.stopPropagation (ideally wrapped in a prop or some kind of flag). If anyone has any questions, feel free to message here or over email!

[quinnlangille]

As mentioned in #418, it seems this is also happening for most other events in the carousel

[jonascarlbaum]

Hi, I'm trying to figure out something related to event propagation too.
If dragging and releasing on an anchor tag in slide item the anchors default behaviour remains.

Expected behaviour would in my eyes be that any child event with mousedown before dragstart and mouseup after the dragstart would be preventDefault:ed, at least if mouseup is between dragstart and dragend.

Current behaviour isn't good anyway.

I've tried setting a data-value on component with slider and pass that as property into an anchor component where I consider the passed property and tries preventDefault:ing on the click event.

The problem is probably that the events I can listen on isn't actually one that is telling me if a drag is started, active or finished.

Have you any idea on how I can fix this or do you have any idea on how to provide the event callbacks? ;)

[flyingL123]

I'm with you @jonascarlbaum. Unfortunately this library is unusable for me. I'm implementing it on an ecommerce website to hold a bunch of product cards. The cards contain a link to the product. On mobile, when dragging the carousel the links are getting clicked and navigating away.

Additionally I am noticing that while dragging, the native window scroll still takes place as well, which makes it very award to use. Expected behavior for me would be that most (all) events are prevented from occurring while the user is dragging.

Slick Carousel seems to have figured this out. I was trying to look through their code to see if there was quick way to use the same strategy, but I couldn't figure it out.

Anyone have any advice on this?

[jonascarlbaum]

I'm with you @jonascarlbaum. Unfortunately this library is unusable for me. I'm implementing it on an ecommerce website to hold a bunch of product cards. The cards contain a link to the product. On mobile, when dragging the carousel the links are getting clicked and navigating away.

Additionally I am noticing that while dragging, the native window scroll still takes place as well, which makes it very award to use. Expected behavior for me would be that most (all) events are prevented from occurring while the user is dragging.

Slick Carousel seems to have figured this out. I was trying to look through their code to see if there was quick way to use the same strategy, but I couldn't figure it out.

Anyone have any advice on this?

I don’t have the code in front of me, but I either turned mouse drag of with some property or used some device width check in JS and toggle some data to change some property depending on device width... Not completely tested on mobile yet though...