Can't add event listener after it was removing by "removeEventListener" only on mobile

I'm newbie in js and jquery.

I have the code:

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.addEventListen开发者_如何学Cer((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);

The borblem is within if (Math.abs(dragLengthX) > wrapperHalfWidth ){...} section. I need to delete event handlers for the 500ms to prevent other functions (dragStart(event) and dragMove(event)) start.

On desctop it work good. it delete event for the time, when Slidind function is work. But on mobile devices after alert event listeners don't work

Don't use addEventListener or removeEventListener with jQuery. Use bind()/unbind() instead.

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));
}

Although I would find it more elegant if you would use a flag that that tells whether the event handlers should do anything or not, instead of constantly binding and undbinding them.