search

gs-shop / vue-slick-carousel

🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
https://gs-shop.github.io/vue-slick-carousel/
Other
814 stars 183 forks source link

Click on image inside slide does not trigger click event on iOS #98

Open rico opened 4 years ago

rico commented 4 years ago

I'm not sure if this is related to https://github.com/kenwheeler/slick/issues/1015.

I have carousel with the following markup for the slides:

<div class="image" @click="openGallery">
    <h2>Title</h2>
    <img class="image" src="[url]">
</div>

Clicking on the <h2> does trigger the click event, but clicking on the <img> does not.

Any idea why this happens or what I can do?

davidemeroni commented 4 years ago

I have the same issue. Links are working fine, but when they wrap an image they don't work anymore.

davidemeroni commented 4 years ago

SOLVED! `img { pointer-events: none;

@media (hover: hover) {
    pointer-events: auto;
}

}` this will prevent any click on the IMG, then on no-touch device you can re-assign the event with a media query. Tested on a few IOS emulator so far.. it work fine.

laksmaria commented 4 years ago

Facing a similar issue here with the router-link wrapped with text and image. However it does work when disable the touchMove in the config.

laksmaria commented 4 years ago

SOLVED! `img { pointer-events: none;

@media (hover: hover) {
    pointer-events: auto;
}

}` this will prevent any click on the IMG, then on no-touch device you can re-assign the event with a media query. Tested on a few IOS emulator so far.. it work fine.

Yeah this solution works fine in iOS & Pixel Chrome browser. But for some reason it's not working in Samsung and other android chrome :(