Flickity中.flickity-viewport的mousedown事件左键点击无效求助

Flickity默认会拦截.flickity-viewport上的原生左键mousedown事件，以此实现核心的拖拽交互逻辑，所以直接绑定事件会被阻止。这里提供两种可行的解决方法：

• 方法一：使用Flickity原生事件钩子
  Flickity内置了pointerDown事件，能兼容鼠标和触摸操作，可替代原生mousedown使用：

  const flkty = new Flickity('.carousel', {
    // 你的Flickity配置项
  });
  
  flkty.on('pointerDown', (event, pointer) => {
    // 筛选出鼠标左键点击的场景
    if (pointer.type === 'mouse' && pointer.button === 0) {
      // 这里编写你的左键点击处理逻辑
      console.log('左键点击已触发');
    }
  });
  

• 方法二：通过事件捕获阶段绑定
  如果必须使用原生mousedown事件，可以在事件捕获阶段绑定，这样能在Flickity阻止事件前触发：

  const viewport = document.querySelector('.flickity-viewport');
  viewport.addEventListener('mousedown', (e) => {
    if (e.button === 0) {
      // 左键点击处理逻辑
      console.log('原生mousedown事件触发');
    }
  }, true); // 第三个参数设为true开启捕获模式
  

注意事项 #

• 不要修改Flickity源码取消事件拦截，这会破坏拖拽功能且不利于版本升级；
• 如果需要在点击时暂停拖拽，可在事件内调用e.stopPropagation()，或使用Flickity的disable()临时禁用，处理完成后再用enable()恢复。

内容的提问来源于stack exchange，提问作者Tung Nguyen