如何防止刷卡觸發點擊？

我使用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

如何防止刷卡觸發點擊？

回答

相關問題