如何防止刷卡触发点击？

我使用TouchSwipe来创建可滑动的图像列表。我将滑动事件绑定到图像，同时我还绑定了可打开图像大版本的单击事件。如何防止刷卡触发点击？

我的问题是，如果我刷卡，它也会触发点击事件。我试过tap instead of swipe，但我无法完成工作。在此之后，我尝试了event.preventDefault()和event.stopPropagation()，这是在很多地方建议的，但没有效果。我最终的解决方案是解除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'); 
     }); 
    } 
});

有没有办法在活动结束后完成，以便完成刷卡后我可以重新绑定点击所以它不会触发rebinded点击中止了事件本身或者调用一个函数？我也愿意接受任何其他解决方案。

来源

2013-10-07 totymedli

你有没有找到任何解决办法？ – flakerimi

@Flakerim不，但发现在移动平台上它的实现方式不同，所以这个问题在那里不存在。在PC上仍然是一个问题。 – totymedli

我修正了我的问题，它使用革命性的滑动滑动插入，我将$ .fn.swipe重命名为$ .fn.swipeing并调用.swipeing（{}），检查这是否有助于您。你可能有其他插件重写滑动。 – flakerimi

根据您提供给Tap与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：

<style type="text/css"> 
    .js-header-swipe-image { 
     background-color:blue; 
     color:white; 
     width:500px; 
     height:500px; 
    } 
</style> 
<div id="modal-gallery"> 
    Hello! 
</div> 
<div class="js-header-swipe-image"> 
    Swiping Div 
</div>

的jQuery：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".js-header-swipe-image").swipe({ 
      tap: function(event, target) { 
       alert('tap'); 
      }, 
      swipe:function(event, direction, distance, duration, fingerCount){ 
       //Handling swipe direction. 
       alert('swipe'); 
      } 
     }); 
    }); 
</script>

当 “刷卡” 的DIV我收到警报swipe和点击时该div我收到警报tap。

来源

2013-10-07 14:50:41 Nunners

不，轻拍事件甚至没有被解雇。 – totymedli

我添加了一些使用TouchSwipe库的HTML和Javascript。如果你不能使用上面的代码来工作，那么你可以提供你正在使用的jQuery版本以及可能的[JSFiddle]（http://jsfiddle.net/）代码。 – Nunners

-1

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

来源

2014-08-24 09:19:54 tkjeon

请在代码中添加一些解释。 –

我有同样的问题。轻击功能将不会被调用，因为我已设置threshold:0。一旦我评论说出来，轻拍事件就很好。

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

来源

2014-10-28 17:32:27 Federico

我使用这段代码使按钮仅触发（上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") 
    } 
});

来源

2014-11-21 21:12:39 LocDog

如何防止刷卡触发点击？

回答

相关问题