Wie um zu verhindern, streichen Sie auf Auslöser klicken?

Benutze ich TouchSwipe erstellen Sie eine swipeable Bild-Liste. Ich Binde die swipe event zu den Bildern, während ich binden auch ein click-Ereignis öffnet sich das Bild die große version.

Mein problem ist, dass wenn ich streichen, es auch löst das click-Ereignis. Ich habe versucht, Tippen statt wischen aber ich kann nicht damit es funktioniert. Danach habe ich versucht event.preventDefault() und event.stopPropagation() wurde vorgeschlagen, in einer Menge Platz, aber es gab keine Wirkung. Meine Letzte Lösung versuchen war die Bindung die click-Ereignis und binden es nach der Veranstaltung, aber wenn ich binden Sie das Ereignis in den sehr Ende der Veranstaltung die Funktion, es feuert wieder auf.

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

Gibt es eine Möglichkeit zum Abbruch einer Veranstaltung selbst, oder eine Funktion aufrufen, nachdem die Veranstaltung beendet, so kann ich erneut binden, die auf nach dem streichen fertig, so dass Sie nicht auslösen rebinded klicken Sie auf? Ich bin auch offen für jede andere Lösung für das problem.

  • Haben Sie keine Lösung gefunden?
  • Nein, aber fand heraus, dass in der mobilen Plattformen ist es anders implementiert, so dass dieses problem nicht existiert. Noch ein problem auf dem PC.
  • Ich fixe mir war es mit revolution Schieberegler, swipe, insted, die ich umbenannt in $.fn.streichen Sie auf $.fn.swipeing und genannt .swipeing({}), überprüfen Sie, ob das hilft Euch. Haben Sie vielleicht andere plugins, überschreiben streichen.
InformationsquelleAutor totymedli | 2013-10-07
  1. 2

    Ich dieses bit des Codes, so dass die Schalter nur noch ausgelöst (auf touchend -) wenn nicht wird geklaut auf:

    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")
    }
});
    InformationsquelleAutor LocDog
  2. 1

    Basierend auf dem link, den Sie an den Wasserhahn vs Streichen

    Versucht haben Sie den code unten ? :

    $(".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 : Funktioniert Lösung

    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>

    Beim "Durchziehen" der div-ich erhalte die Warnung swipe und beim Klick auf das div habe ich die Benachrichtigung erhalten tap.

    • Nein, das tap-Ereignis nicht selbst beschossen alle.
    • Ich habe einige HTML-und Javascript-Code arbeitet bei mir mit dem TouchSwipe Bibliothek. Wenn Sie nicht bekommen, dies funktioniert mit dem obigen code können Sie liefern mir, welche version von jQuery, die Sie verwenden und möglicherweise ein JSFiddle der code, den Sie versuchen?
    InformationsquelleAutor Nunners
  3. 0

    Hatte ich das gleiche problem. Die tap-Funktion nicht aufgerufen werden, da hatte ich threshold:0. Sobald ich bemerkte, dass sich die tap-Ereignis hat Prima funktioniert.

                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
            });
    InformationsquelleAutor 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;
    });
    • Fügen Sie bitte eine Erklärung zu dem code.
    InformationsquelleAutor tkjeon
Schreibe einen Kommentar