Конфликт с 2-мя сенсорными событиями javascript-плагинами, наложение событий касания в неправильном порядке?

Question

Смотрите мои jsFiddle для тестирования.

Я использую эти два плагина js/jquery, плагины Ken Wheelers Slick Slider и Jakie Stfu Snap.js, которые оба полагаются на события касания, чтобы запустить их функции.

Я хочу иметь возможность использовать плагины в сочетании друг с другом. Я создал jsFiddle моей точной рабочей среды.

Вы можете видеть, как слайдер snap.js отлично работает. И события Touch 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/