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

Question

请参阅我的jsFiddle进行测试。

我使用这两个JS/jQuery插件，Ken Wheelers Slick Slider和Jakie Stfu Snap.js插件，这都依赖于触摸事件解雇其功能。

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

你可以看到snap.js绘制幻灯片效果很好。而滑动滑块触摸事件也非常有效，但只有当滑动滑块左移滚动时才会如此。如果我尝试触摸并向右滚动，它会打开snap.js菜单绘制。

我的问题是谁能帮助我使滑动滑块在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/