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

Question

查看我的 jsFiddle 进行测试。

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

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

您可以看到 snap.js 绘图幻灯片效果很好。 Slick Slider 触摸事件也非常有效，但只有当 Slick 滑块向左触摸滚动时才有效。如果我尝试向右触摸滚动，它会打开 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/

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

Conflict with 2 touch event javascript plugins, layering touch events in wrong order?

javascript

jquery

jsfiddle

slick.js