Comment prévenir faites glisser le doigt pour déclencher cliquez sur?

- Je utiliser TouchSwipe pour créer un swipeable liste d'images. - Je lier le mouvement de balayage d'événement pour les images, tandis que j'ai également lier un événement click qui permettra d'ouvrir l'image est grande la version.

Mon problème est que si je le balayage, il déclenche également l'événement click. J'ai essayé tapez au lieu de glisser mais je ne peux pas le faire fonctionner. Après cela, j'ai essayé event.preventDefault() et event.stopPropagation() qui a été suggéré dans un beaucoup de place, mais il n'y a pas d'effet. Ma solution finale tentative a été de séparer l'événement click et lier de nouveau après l'événement, mais si je lier l'événement à la fin de la fonction d'événement, il déclenche cliquez sur nouveau.

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

Est-il un moyen d'annuler un événement lui-même ou appeler une fonction après l'événement terminé donc je peux relier le clic une fois le balayage terminé donc il ne serait pas déclencher la rebinded cliquez sur? Je suis aussi ouvert à toute autre solution au problème.

Avez-vous trouvé la solution?
Non, mais a constaté que, dans les plates-formes mobiles, il est mis en œuvre différemment afin que ce problème n'existe pas. Encore un problème sur le PC.
Je fixe la mienne, c'est à l'aide révolution curseur balayez vers la place, j'ai renommé $.fn.balayez vers $.fn.swipeing et appelé .swipeing({}), vérifiez si cela vous aide. Vous pourriez avoir d'autres plugin qui remplacent le balayage.

OriginalL'auteur totymedli | 2013-10-07

  1. 2

    J'utilise ce bout de code afin que les boutons sont déclenchés seulement (sur touchend) si ce n'est être glissée sur:

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

    OriginalL'auteur LocDog

  2. 1

    Basée sur le lien que vous avez fourni pour le Robinet vs Balayez

    Avez-vous essayé le code ci-dessous ? :

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

    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>

    Lors de "Piquer" la div, j'obtiens l'alerte swipe et en cliquant sur le div-je recevoir l'alerte tap.

    Non, le robinet de l'événement n'est pas encore tiré.
    J'ai ajouté un peu de HTML et de Javascript qui fonctionne pour moi, en utilisant le TouchSwipe de la bibliothèque. Si vous ne pouvez pas obtenir que cela fonctionne avec le code ci-dessus, pouvez-vous me fournir la version de jQuery vous êtes à l'aide de et, éventuellement, d'un JSFiddle de code que vous essayez?

    OriginalL'auteur Nunners

  3. 0

    J'ai eu ce même problème. La fonction tap ne serait pas appelé parce que j'avais mis threshold:0. Une fois je lui ai dit que, le robinet de l'événement, a très bien fonctionné.

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

    OriginalL'auteur Federico

  4. -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;
    });
    S'il vous plaît ajouter quelques explications pour le code.

    OriginalL'auteur tkjeon