vue3-carousel icon indicating copy to clipboard operation
vue3-carousel copied to clipboard

Anchor links (a tags) redirect the app to the new page after dragging, even prevented elements!

Open Iran-110 opened this issue 1 year ago • 0 comments

Describe the bug If there is an anchor link (i.e. the <a> element) inside the <slide> tags, the app will redirect to the new page after dragging the link, even if you have prevented the default!

To Reproduce

~/pages/index.vue:

<template>
 <Carousel :items-to-show="2" wrap-around>
   <Slide key="1">
     <a href="/test" @click.prevent>First element.</a>
   </Slide>
   <Slide key="2">
     <a href="/test" @click.prevent>Second Element</a>
   </Slide>
 </Carousel>
</template>
<script setup></script>

~/nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['vue3-carousel-nuxt'],
});

Expected behavior Preventing the link from redirecting the page after dragging, because of @click.prevent (equivalents to @click="ev => ev.preventDefault()").

Demo For testing, please download the project and run it on your computer. vue3-carousel does not work in stackblitz. https://stackblitz.com/edit/vue3-carousel-link-tester?file=README.md

Desktop:

  • OS: Linux
  • Browser: Chrome (120.0.6099.129), Firefox (121.0).

Iran-110 avatar Jan 05 '24 13:01 Iran-110