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

Question

参见我的jsFiddle进行测试。

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

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

您可以看到snap.js绘制幻灯片效果很好。 而且“滑动滑块”触摸事件也可以很好地工作，但仅当滑动滑块向左滚动时才有效。 如果我尝试向右触摸滚动，它将打开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/