How to prevent swipe to trigger click?

Question

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.

Transliterate

Have you found any solution? – Sleeper

@Flakerim No, but found out that in mobile platforms it is implemented differently so this problem doesn't exist there. Still a problem on PC. – Transliterate

I fixed mine, it was using revolution slider swipe insted, I renamed $.fn.swipe to $.fn.swipeing and called .swipeing({}), check if this helps you. You might have other plugin that override swipe. – Sleeper

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

Corrupt

Answer 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.

Echinus

No, the tap event is not even fired at all. – Transliterate

I've added some HTML and Javascript that is working for me using the TouchSwipe library. If you cannot get this to work with the above code can you supply me what version of jQuery you are using and possibly a JSFiddle of code you are trying? – Echinus

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

Genteelism

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

Bedrabble