Flickity issue with links and click event

[bviale]

Hello,

I'm having an issue with links inside gallery-cell elements and I suspect this might be a bug with Flickity. I have attached the jQuery click event on the links. When the user slides and click at the same time, the click event on the is triggered but the navigation to the link adress does not occur. In fact the link will start navigation only if the user has not been sliding.

JSFiddle : https://jsfiddle.net/L141tdxa/. To reproduce the issue : click down on the link, then slide, then release your click : the event is triggered but the navigation to google.com have not occured.

Thanks in advance for your feedback

[desandro]

This is the intended behavior. This allows users to slide the gallery using any element on the page, links, buttons, etc. It lets click events propagate. There's additional logic so that static clicks do trigger a click on the element, and allow links to go through if no sliding occurred.

What behavior are you looking for?

[bviale]

Thank you for your answer, I was looking for a trigger of the click event only when the user go through the link because otherwise I have no way to know when the user actually went through it. Would you recommend something to do so ? But as you said, if it was the intended behavior, maybe reasoning is wrong.

[desandro]

Flickity's staticClick event might be what you're looking for.

[bviale]

Ok I'll use that instead of the click event on the link, it will do the trick. Thank you very much I didn't noticed this event in the documentation !

[dalvujovic]

in static banners I have anchor tag and they are not clickabile, what to do?

[AlexandraKlein]

$el.on('dragStart.flickity', () => $el.find('.slide').css('pointer-events', 'none'));
$el.on('dragEnd.flickity', () => $el.find('.slide').css('pointer-events', 'all'));

[joehatescoffee]

If you must make a link in the banner clickable, you can add some custom CSS to allow clicking on the link. Just give the banner (or link) a good id to clarify it thoroughly as to override the flickity CSS.

``

[fredericoo]

$el.on('dragStart.flickity', () => $el.find('.slide').css('pointer-events', 'none')); $el.on('dragEnd.flickity', () => $el.find('.slide').css('pointer-events', 'all'));

Alternate solution without jQuery (and without the need for a specific class on carousel slides):

flkty.on('dragStart', () => flkty.slider.childNodes.forEach(slide => slide.style.pointerEvents = "none") );
flkty.on('dragEnd', () => flkty.slider.childNodes.forEach(slide => slide.style.pointerEvents = "all") );