Не удается добавить прослушиватель событий после его удаления с помощью «removeEventListener» только на мобильном устройстве

Question

Я новичок в js и jquery.

У меня есть код:

function dragEnd(){
    OnDrag = false;
    wrapperHalfWidth = box.parent().width() * settings.animPartofScrennToSlide 
    if (Math.abs(dragLengthX) > wrapperHalfWidth ){
        this.removeEventListener((useMobileDrag ? "touchstart" : "mousedown"), dragStart, false);
        this.removeEventListener((useMobileDrag ? "touchmove" : "mousemove"), dragMove, false);
        this.removeEventListener((useMobileDrag ? "touchend" : "mouseup"), dragEnd, false);
        this.removeEventListener("touchcancel", dragCancel, false);

        var Direction = dragLengthX > 0;
        settings.prevNextClickCallback(outerSlCounter, Direction ? FORWARD : BACK);

        setTimeout(function(){
            this.addEventListener((useMobileDrag ? "touchstart" : "mousedown"), dragStart, false);
            this.addEventListener((useMobileDrag ? "touchmove" : "mousemove"), dragMove, false);
            this.addEventListener((useMobileDrag ? "touchend" : "mouseup"), dragEnd, false);
            this.addEventListener("touchcancel", dragCancel, false);
        }, 500);
        return SlideTo(outerSlCounter + (Direction ? -1 : 1));
    }
    else{   
        dragLengthX = 0;
        box.css({
            '-webkit-transition-timing-function': settings.easingCss,
            '-webkit-transition-duration': settings.animDragTime + 'ms',
            '-webkit-transform': 'translate3d(' + dragLengthX + 'px, 0px, 0px)',
            'transition-timing-function': settings.easingCss,
            'transition-duration': settings.animDragTime + 'ms',
            'transform': 'translate3d(' + dragLengthX + 'px, 0px, 0px)'
        });
    }
    isDragging = false;
    originalX = 0;
};


this.addEventListener((useMobileDrag ? "touchstart" : "mousedown"), dragStart, false);
this.addEventListener((useMobileDrag ? "touchmove" : "mousemove"), dragMove, false);
this.addEventListener((useMobileDrag ? "touchend" : "mouseup"), dragEnd, false);
this.addEventListener("touchcancel", dragCancel, false);

Проблема в том, если (Math.abs (dragLengthX)> wrapperHalfWidth) {...} раздел.Мне нужно удалить обработчики событий на 500 мс, чтобы предотвратить запуск других функций (dragStart (событие) и dragMove (событие)).

В desctop это работает хорошо.удаляет событие на время, когда работает функция Slidind.Но на мобильных устройствах после оповещения слушатели событий не работают

Answer 1

Не используйте addEventListener или removeEventListener с jQuery.Вместо этого используйте bind() / unbind().

if (Math.abs(dragLengthX) > wrapperHalfWidth ) {
  $(this)
  .bind("touchstart mousedown", dragStart)
  .bind("touchmove mousemove", dragMove)
  .bind("touchend mouseup", dragEnd)
  .unbind("touchcancel");

  var Direction = dragLengthX > 0;
  settings.prevNextClickCallback(outerSlCounter, Direction ? FORWARD : BACK);

  setTimeout(function () {
    $(this)
    .unbind("touchstart mousedown touchmove mousemove touchend mouseup")
    .bind("touchcancel", dragCancel);
  }, 500);

  return SlideTo(outerSlCounter + (Direction ? -1 : 1));
}

Хотя я бы посчитал более элегантным, если бы вы использовали флаг, который указывает, должны ли обработчики событий что-либо делать или нет, вместо постоянной привязки иоткрепляя их.