jquery之如何防止滑动触发点击

我使用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)的单击？我也愿意接受任何其他解决方案。

请您参考如下方法:

我使用这段代码，以便只有在未滑动时才会触发按钮(在 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") 
    } 
});