javascript - 与 2 个触摸事件 javascript 插件冲突，以错误的顺序分层触摸事件？

Question

查看我的 jsFiddle用于测试。

我正在使用这两个 js/jquery 插件，Ken Wheelers Slick Slider和 Jakie Stfu Snap.js插件，它们都依赖于触摸事件来触发它们的功能。

我希望能够将这些插件相互结合使用。我创建了一个 jsFiddle我确切的工作环境。

您可以看到 snap.js 绘制幻灯片效果很好。 Slick Slider 触摸事件也能很好地工作，但只有当 Slick slider 向左触摸滚动时才有效。如果我尝试向右触摸滚动，它会打开 snap.js 菜单绘制。

我的问题是任何人都可以帮助我让 Slick Slider 控制 snap.js 插件吗？仅在轮播区域，以便 snap.js 可以在所有其他区域正常工作。

这是我的代码，它是两个插件的所有标准演示代码。

/**
 ** pure js
 **/

// snap event
var addEvent = function addEvent(element, eventName, func) {
  if (element.addEventListener) {
    return element.addEventListener(eventName, func, false);
  } else if (element.attachEvent) {
    return element.attachEvent("on" + eventName, func);
  }
};

// snap parmas
var snapper = new Snap({
  element: document.getElementById('content'),
  disable: 'right',
  maxPosition: 250,
  minPosition: -250,
  transitionSpeed: .2
});

// snap button click function
addEvent(document.getElementById('ol'), 'click', function() {
  snapper.open('left');
});

/**
 ** jQuery functions
 **/
(function($) {

  // slick slider
  $('#carousel').slick({
    dots: false,
    prevArrow: false,
    nextArrow: false,
    autoplay: true,
    autoplaySpeed: 3000
  });

})(jQuery);

如果有任何帮助，我们将不胜感激。

Answer 1

您可以通过在 #carousel 级别停止事件传播来做到这一点。这意味着正在触发的当前事件(拖动事件等)不会到达 Snap.js。

$('#carousel').on('mousedown touchstart', function (e) {
    e.stopPropagation();
});

也在移动设备上使用 touchstart 事件进行了测试。

https://jsfiddle.net/chrispage1/o9whuLyw/2/