僅通過移動設備上的“ 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);

麻煩在if（Math.abs（dragLengthX）> wrapperHalfWidth）{...}部分中。 我需要刪除500ms的事件處理程序，以防止其他功能（dragStart（event）和dragMove（event））啟動。

在桌面上運行良好。 當Slidind函數起作用時，它會暫時刪除事件。 但是在移動設備上，警報事件偵聽器無法正常運行

Answer 1

不要將jQuery與addEventListener或removeEventListener一起使用。 使用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));
}

盡管如果您使用一個標志來告訴事件處理程序是否應該執行任何操作，而不是不斷地綁定和取消綁定它們，我會發現它更優雅。