javascript - flickity JS插件的链接点击问题

Question

我想知道用户何时通过单击位于我的 Flickity 滑块内的链接开始导航到新页面。我已经在链接上附加了 jQuery click 事件，但是当用户同时滑动并单击时，<a>会触发 click 事件，但不会发生到链接地址的导航。

演示：http ://codepen.io/anon/pen/GoapaY 。要重现该问题：单击链接，然后滑动，然后释放您的单击：事件已触发，但到 example.com 的导航尚未发生。

我可以使用哪个事件/技巧来了解用户何时实际导航到链接地址？

Answer 1

通过在 Flickity 的 GitHub 上打开的此问题获得的答案：

这是预期的行为。这允许用户使用页面上的任何元素、链接、按钮等来滑动图库。它可以传播点击事件。还有一些额外的逻辑，这样静态点击确实会触发对元素的点击，如果没有发生滑动，则允许链接通过。Flickity 的staticClick事件可能是您正在寻找的。

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'
        }
      }
    })