Links and button based slides get triggered when dragging on desktop

ismail9k / vue3-carousel

Vue 3 carousel component

https://ismail9k.github.io/vue3-carousel/

MIT License

660 stars 164 forks source link

Links and button based slides get triggered when dragging on desktop #175

Closed OliverJEvans closed 2 years ago

OliverJEvans commented 2 years ago

Describe the bug

I have slides which are made up of anchors with hrefs or buttons with @click events
On desktop when dragging the carousel on mouseup the anchor is clicked.
This issue doesn't exist on mobile

To Reproduce https://codesandbox.io/s/thirsty-mestorf-sjhtqt?file=/src/App.vue

Above link has a carousel with multiple slides containing buttons
Open console of codesandbox
Click on slide and drag
On release of mouse, console log triggered

Expected behavior

As mobile, when draging carousel button and anchor actions not triggered.
When not dragging clicking button triggers event

Screenshots Kapture 2022-04-13 at 14 16 08

Desktop (please complete the following information):

OS: Mac OSX 12.3.1
Browser: Chrome
Version: 100.0.4896.88

woken-token commented 2 years ago

Same behaviour on Windows 10 in Chrome.

Naresh-Khatri commented 2 years ago

Same thing when an a tag is wrapped inside <Slide>

ismail9k commented 2 years ago

@Naresh-Khatri We can not prevent links/buttons from being clicked at all, however after daring it will prevent the click event from being handled.

This is the same example with the latest carousel version 0.1.40

166887052-a4bfed80-91b1-4646-a3d8-c5277468db5d

Naresh-Khatri commented 2 years ago

It was a fault on my end I got it working now but there's still a problem. When I try to drag a slide having an <a> tag with href attr it starts dragging the link and not the actual slide as shown. I fixed that by adding draggable='false' to <a> but now it opens up the link when dragging is done.

https://user-images.githubusercontent.com/32219857/166948339-c4cb29ad-9920-4f35-a2d3-48465fe6daee.mp4

ismail9k commented 1 year ago

@Naresh-Khatri This should be fixed in the latest version

franco-onevillas commented 1 year ago

Hey there @ismail9k @Naresh-Khatri , how did you solve this? I have something like this but its opening the link every time I drag on desktop

<Slide v-for="post in posts" :key="post.id" class="px-4">
  <a :href="post.permalink" target="_blank" draggable="false">
     <img :src="post.media_url" class="w-full h-[385px] object-cover" />
  </a>
</Slide>

Naresh-Khatri commented 1 year ago

@franco-onevillas It was fixed right after when I posted it, BTW I have been using another carousel (Splide) these days and that doesn't have this problem by default.

franco-onevillas commented 1 year ago

@Naresh-Khatri thank you so much, looks promising! cheers

SDIjeremy commented 1 year ago

I was able to solve the link-clicking issue by converting my <a href=".."> into buttons instead.