ट्रिगर करने के लिए स्वाइप को कैसे रोकें?

Question

मैं एक स्वाइप करने योग्य छवि सूची बनाने के लिए TouchSwipe का उपयोग करता हूं। मैं छवियों पर स्वाइप ईवेंट को बांधता हूं, जबकि मैं एक क्लिक इवेंट भी बांधता हूं जो छवि के बड़े संस्करण को खोल देगा।

मेरी समस्या यह है कि अगर मैं स्वाइप करता हूं, तो यह क्लिक ईवेंट को भी सक्रिय करता है। मैंने tap instead of swipe की कोशिश की लेकिन मैं इसे काम नहीं कर सकता। इसके बाद मैंने event.preventDefault() और event.stopPropagation() को आजमाया जो बहुत से स्थान पर सुझाया गया था, लेकिन इसका कोई प्रभाव नहीं पड़ा। मेरा अंतिम समाधान प्रयास क्लिक ईवेंट को अनइंड करना था और ईवेंट के बाद इसे दोबारा बांधना था, लेकिन अगर मैं इवेंट फ़ंक्शन के अंत में ईवेंट को बाध्य करता हूं, तो यह फिर से क्लिक करता है।

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

वहाँ के बाद घटना तो समाप्त हो गया मैं कड़ी चोट समाप्त होने के बाद क्लिक rebind कर सकते हैं तो यह क्लिक rebinded ट्रिगर नहीं करेंगे, एक घटना अपने आप में एक समारोह गर्भपात या कॉल करने के लिए कोई तरीका है? मैं समस्या के किसी अन्य समाधान के लिए भी खुला हूं।

Answer 1

लिंक आप टैप करने के लिए प्रदान बनाम स्वाइप

आप नीचे दिए गए कोड की कोशिश की है के आधार पर? :

$(".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 मुझे चेतावनीप्राप्त होता है।

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

मुझे यह वही समस्या थी। टैप फ़ंक्शन को नहीं कहा जाएगा क्योंकि मैंने 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 
      }); 

Answer 4

मैं कोड के इस बिट का उपयोग करें ताकि बटन केवल (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") 
    } 
});