Make `staticClick.flickity` event prevents default `click` on links

[nicooprat]

I'd like to make slides clickables to move the slider. If it's the current slide, click on the link as it would by default. If it's another slides, move the carousel to it programmatically and prevent original click. Here's an example:

https://codepen.io/nicooprat/pen/BYjoGR?editors=1011

Here the goal is, when clicking previous or next slide for example, to prevent opening a new tab.

Any idea? Thanks.

Ref #92 #81

[desandro]

Thanks for that. staticClick is a custom event for Flickity, so it doesn't have the browser link click behavior attached with it. So we'll have to manipulate click instead.

var $carousel = $('.carousel').flickity();
var flickity = $carousel.data('flickity');

$carousel.on( 'click', 'a', function( event ) {
  if ( event.currentTarget != flickity.selectedElement ) {
    event.preventDefault();
  }
});

See demo https://codepen.io/desandro/pen/4faeb0188b0e45b94298b8e15081feba/

I'm using selectedElement to check if the clicked element matches

[nicooprat]

Thanks, this workaround works. Although, wouldn't be possible to transfer the original click event in this staticClick custom event? Would be a lot cleaner IMO :)

[desandro]

Although, wouldn't be possible to transfer the original click event in this staticClick custom event?

Sorry, staticClick works by tracking mousedown & mouseup events, not click events themselves.

[neuedeutsche]

i realise this issue was closed. but i have a similar issue that relates to this.

The UX here implies that you only want to click through to a link of the current slide, what if theres multiple cells visible and you want to click through to the link of any of them. but not when u drag it.

this example allows only on the selected index if i am not mistaken. (also assume is freescroll)

shouldn't we prevent default on all links / buttons or any defined element on drag and allow always on static?

[desandro]

what if theres multiple cells visible and you want to click through to the link of any of them. but not when u drag it.

Flickity already has this behavior by default. This issue refers to dismissing link clicks non-selected cells.