jquery - 如何防止滑动触发点击？

Question

我使用TouchSwipe创建可滑动的图像列表。我将滑动事件绑定(bind)到图像，同时我还绑定(bind)了一个单击事件来打开图像的大版本。

我的问题是，如果我滑动，它也会触发点击事件。我试过tap instead of swipe但我无法让它发挥作用。之后我尝试了很多地方建议的 event.preventDefault() 和 event.stopPropagation() ，但没有效果。我最终的解决方案尝试是取消绑定(bind)点击事件并在事件发生后重新绑定(bind)它，但是如果我在事件函数的最后绑定(bind)事件，它会再次触发点击。

$(".js-header-swipe-image").swipe({
    swipe:function(event, direction, distance, duration, fingerCount){
        $("#details").unbind('click');//Temporary unbind, otherwise the swipe's click would trigger the gallery opening.

        //Handling swipe direction.

        $('#details').on('click', '.js-header-swipe-image', function (){//Rebind the temporary unbinded event.
            console.log('click');
            $('#modal-gallery').modal('show');
        });
    }
});

有没有办法中止事件本身或在事件完成后调用函数，以便我可以在滑动完成后重新绑定(bind)单击，这样就不会触发重新绑定(bind)的单击？我也愿意接受任何其他解决方案。

Answer 1

我使用这段代码，以便只有在未滑动时才会触发按钮(在 touchend 上):

var startY;
var yDistance;

function touchHandler(event) {
    touch = event.changedTouches[0];
    event.preventDefault();
}

$('.button').on("touchstart", touchHandler, true);
$('.button').on("touchmove", touchHandler, true);

$('.button').on("touchstart", function(){
    startY = touch.clientY;
});

$('.button').on('touchend', function(){

    yDistance = startY - touch.clientY;

    if(Math.abs(yDist) < 30){

        //button response here, only if user is not swiping
        console.log("button pressed")
    }
});