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

borblem在if（Math.abs（dragLengthX）＆gt; wrapperHalfWidth）{...}部分内。我需要删除500ms的事件处理程序，以防止其他函数（dragStart（event）和dragMove（event））启动。

在desctop上它运作良好。当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));
}

虽然我会发现它更优雅，如果你使用一个标志来告诉事件处理程序是否应该做任何事情，而不是不断地绑定和解除绑定它们。

仅在移动设备上删除“removeEventListener”后才能添加事件侦听器

1 个答案: