如何防止滑动触发点击？
我使用TouchSwipe创建可滑动的图像列表。 我将滑动事件绑定到图像，同时我还绑定了一个将打开图像的大版本的单击事件。
我的问题是，如果我滑动，它也会触发click事件。 我尝试点击而不是刷卡，但我无法使其工作。 在此之后，我尝试了很多地方建议的event.preventDefault()和event.stopPropagation() ，但没有效果。 我的最终解决方案尝试是取消绑定click事件并在事件之后重新绑定它，但如果我在事件函数的最后绑定事件，则会再次触发click。
$(".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'); }); } });
有没有办法在事件结束后中止事件本身或调用函数，这样我可以在滑动完成后重新点击点击，这样就不会触发重新点击的点击？ 我也对这个问题的任何其他解决方案持开放态度。
我使用这段代码，以便只有在没有被刷过时触发按钮（在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") } });
根据您提供给Tap vs Swipe的链接
你试过下面的代码吗？ ：
$(".js-header-swipe-image").swipe({ tap: function(event, target) { console.log('click'); $('#modal-gallery').modal('show'); }, swipe:function(event, direction, distance, duration, fingerCount){ //Handling swipe direction. } });
编辑：工作解决方案
HTML：
Hello! Swiping Div
jQuery：
当“滑动”div时，我收到警报swipe ，当点击div时，我会收到警报。
我有同样的问题。 因为我设置了threshold:0所以不会调用tapfunction。 一旦我评论出来，点击事件就可以了。
container.swipe({ touch:function(event, target) { alert('touch'); }, tap:function(event, target) { alert('tapped'); }, swipeLeft:function(event, direction, distance, duration, fingerCount) { console.log('swipe left'); }, swipeRight:function(event, direction, distance, duration, fingerCount) { console.log('swipe RIGHT'); }, swipeUp:function(event, distance, duration, fingerCount, fingerData) { console.log("swipeUp from callback"); }, swipeDown:function(event, distance, duration, fingerCount, fingerData) { console.log("swipeDown from callback"); } // threshold:0 });
var isTouchMoving = false; $( "#items .item" ).on("vclick", function(){ if(isTouchMoving){ isTouchMoving = false; return false; } //do something }); $(document).on('vmousemove', function(){ isTouchMoving = true; }); $(document).on('scrollstop', function(){ isTouchMoving = false; });