轻弹JS插件的链接点击问题

Question

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

演示 ： 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'
        }
      }
    })