Link flickity JS 插件的点击问题

Question

我想知道用户何时通过单击位于我的 Flickity 滑块内的 link 开始导航到新页面。我在 link 上附加了 jQuery 点击事件，但是当用户同时滑动和点击时， <a> 上的点击事件被触发但是导航到 link地址不存在。

演示：http://codepen.io/anon/pen/GoapaY .要重现此问题：单击 link，然后滑动，然后松开您的单击：事件已触发，但尚未导航至 example.com。

我可以使用哪个 event/trick 来了解用户实际导航到 link 地址的时间？

Answer 1

在 Flickity 的 GitHub 上打开 this issue 获得的答案：

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. Flickity's staticClick event might be what you're looking for.

Answer 2

这解决了我的问题：

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

我只是在 dragStart 上禁用指针事件并在 dragEnd 上恢复它们。

Answer 3

Ali Klein 的解决方案对我有用。

我没有使用 jQuery 所以这是我使用的代码

 const carousel = document.querySelector('.carousel')
 const flkty = new Flickity(carousel, {
      // ...options
      on: {
        'dragStart': () => {
          carousel.style.pointerEvents = 'none'
        },
        'dragEnd': () => {
          carousel.style.pointerEvents = 'all'
        }
      }
    })

Link flickity JS 插件的点击问题

Link click issue with flickity JS plugin

html

javascript

jquery

hyperlink

flickity