Come impedire lo scorrimento per attivare il clic?

Question

Io uso TouchSwipe per creare un elenco di immagini scorrevoli. Lego l'evento di scorrimento alle immagini, mentre lego anche un evento click che aprirà la versione ingrandita dell'immagine.

Il mio problema è che se faccio scorrere, spara anche l'evento click. Ho provato tap instead of swipe ma non riesco a farlo funzionare. Dopo questo ho provato event.preventDefault() e event.stopPropagation() che è stato suggerito in un sacco di posto, ma non c'era alcun effetto. Il mio tentativo di soluzione finale è stato quello di disassociare l'evento click e rebindarlo dopo l'evento, ma se collego l'evento alla fine della funzione evento, si attiva nuovamente il clic.

$(".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'); 
     }); 
    } 
}); 

Esiste un modo per interrompere un evento in sé o di chiamare una funzione dopo l'evento si è concluso in modo da poter associare nuovamente il clic dopo il colpo finito in modo che non farebbe scattare il rebinded clic? Sono anche aperto a qualsiasi altra soluzione al problema.

Answer 1

basati sul collegamento che hai fornito al rubinetto vs Swipe

Hai provato il codice qui sotto? :

$(".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. 
    } 
}); 

Edit: soluzione di lavoro

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> 

Quando "Swiping" il div ricevo l'avviso swipe e quando si fa clic il div ricevo l'avviso tap.

Answer 2

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

Answer 3

Ho avuto lo stesso problema. La funzione tap non sarebbe stata chiamata perché avevo impostato threshold:0. Una volta commentato, l'evento tap ha funzionato bene.

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

Answer 4

Io uso questo pezzo di codice in modo che i pulsanti sono attivati ​​solo (su touchend) se non viene strisciato su:

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