與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/