Abbrechen touchend wenn touchmove feuert

Ich bin etwas zu bauen, die hauptsächlich für den Einsatz auf tablets, wo kann der Benutzer Tippen Sie auf ein Element auf dem Bildschirm und eine Klasse angewendet. Dies ist, was ich habe, so weit:

Probleme:

  1. Möchte ich den Einsatz von touch-events zu löschen, die Klasse, und fügen Sie die Klasse auf touch-end (um es schneller zu machen).
  2. Ich will es nicht, etwas zu tun, wenn der Benutzer Eingaben (touchmoves).

Ich habe versucht eine Reihe von Dingen, von denen keines gearbeitet haben. Die einfachste habe ich (erfolglos) versuchte, ist dieses:

var dragging = false;

$(".items").on("touchmove", function(){
      dragging = true;
});

$('.items').on("click touchend", function(event){
    if (dragging = true){
    }
    else{
    $('.items').removeClass('selected');
    $(this).addClass('selected');
    }
});
  • if (dragging = true) sollte nur if (dragging) oder besser noch if (!dragging) dann bewegen Sie alles, was in der else-Anweisung in der if-Anweisung (daher, Sie haben keine andere).
  • Sobald Sie touchmove einmal, Sie setzen dragging = true dies wird nicht zulassen, dass andere Klicks pro code. Sie muss zurücksetzen dragging = false nach der Veranstaltung beendet.
InformationsquelleAutor EmmaGamma | 2013-04-25
  1. 19

    Ich würde behaupten, das ist ein sicherer Weg, es zu tun

    Einstellung variable auf false

    var dragging = false;

    Einstellung var auf true ontouchmove (ermöglicht die Wiederverwendung dieser code überall in Ihrem app)

    $("body").on("touchmove", function(){
  dragging = true;
});

    Schaltfläche

    $("#button").on("touchend", function(){
      if (dragging)
      return;

      //your button action code
});

    Variable zurücksetzen (wichtig)

    $("body").on("touchstart", function(){
    dragging = false;
});
    InformationsquelleAutor Jonathan
  2. 7

    Sie möchten, verwenden Sie eines der folgenden:

    if(dragging == true)

    Oder einfach:

    if(dragging)

    Sollten Sie nur mit einem einzigen = Zeichen, wenn Sie Einstellung einen Wert, in der Erwägung, dass zwei == Zeichen sollte verwendet werden, wenn überprüfung einen Wert. Daher sollte Ihr code so Aussehen:

    $('.items').on("click touchend", function(event){
    if(!dragging)
    {
        $('.items').removeClass('selected');
        $(this).addClass('selected');
    }
});

    Bemerken, wie Sie nicht brauchen, um zu überprüfen, ob dragging == true weil Sie nicht mit jedem code in diesem Fall. Stattdessen können Sie einfach überprüfen, wenn dragging == false oder !dragging

    • aus irgendeinem Grund ist es nicht erlaubt, mich zu fügen Sie die "select" - Klasse auf touch-Geräte, aber es funktioniert einwandfrei auf desktop/laptop.
    • Hier ist ein link auf die vollständige Seite: reveriesrefined.com/myftp/Crane der Konsole nicht angezeigt, Fehler in chrome oder firefox.
    InformationsquelleAutor What have you tried
  3. 0

    wo Sie haben, ziehen überprüfen setzen 

    if (dragging == true){
   dragging = false;
}

else{
$('.items').removeClass('selected');
$(this).addClass('selected');
}

    wird es zurückgesetzt auf die Version

    auch watch out für die Doppel-Anrufe auf Ereignisse, wie Sie manchmal auslösen zweimal auf einigen Plattformen am besten zu überprüfen-Plattform mit der ersten folgenden wird mit Hilfe prüft

    var clickEventType=((document.ontouchstart!==null)?'click':'touchend');

    oder

    var clickEventType = 'touchend';
if(document.ontouchstart!==null)
{
     clickEventType = 'click';
}
    InformationsquelleAutor Derry White
Schreibe einen Kommentar