How to prevent swipe to trigger click?

问题

I use TouchSwipe to create a swipeable image list. I bind the swipe event to the images, while I also bind a click event that will open up the image's large version.

My problem is that if I swipe, it also fires the click event. I tried tap instead of swipe but I can't make it work. After this I tried event.preventDefault() and event.stopPropagation() that was suggested in a lot of place, but there was no effect. My final solution attempt was to unbind the click event and rebind it after the event, but if I bind the event in the very end of the event function, it fires click again.

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

Is there a way to abort an event itself or call a function after the event finished so I can rebind the click after the swipe finished so it wouldn't trigger the rebinded click? I'm also open to any other solution to the problem.

回答1:

I use this bit of code so that buttons are only triggered (on touchend) if not being swiped on:

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

回答2:

Based on the link you provided to the Tap vs Swipe

Have you tried the below code ? :

$(".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 : Working Solution

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>

When "Swiping" the div I recieve the alert swipe and when clicking the div I receive the alert tap.

回答3:

I had this same problem. The tap function would not be called because I had set threshold:0. Once I commented that out, the tap event worked just fine.

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

回答4:

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

来源：https://stackoverflow.com/questions/19227527/how-to-prevent-swipe-to-trigger-click