it-swarm.com.de

Was ist der beste Weg, um lange Tipp- und Doppeltippereignisse auf mobilen Geräten mit jQuery zu verarbeiten?

Ich bin auf der Suche nach der besten Lösung zum Hinzufügen von "doubletap" - und "longtap" -Ereignissen für die Verwendung mit jQuery's live (), bind () und trigger (). Ich habe meine eigene schnelle Lösung gerollt, aber es ist ein bisschen fehlerhaft. Hat jemand Plugins, die er empfehlen würde, oder eigene Implementierungen, die er gerne teilen möchte?

27
Luke Dennis

Es wurde berichtet, dass es sich bei jQuery um einen Fehler handelt. Da das Dubletten jedoch nicht mit dem Doppelklick identisch ist, hat es keine hohe Priorität. Allerdings hat Mastermind Raul Sanchez eine Jquery-Lösung für Doubletap codiert, die Sie wahrscheinlich verwenden können! Hier ist der Link , funktioniert auf mobiler Safari.

Es ist einfach zu bedienen:

$('selector').doubletap(function() {});

-bearbeiten-

Und es gibt ein Longtap-Plugin hier ! Sie können eine Demo auf Ihrem iPad oder iPhone sehen hier .

19
rsplak

die Antwort von rsplak ist gut. Ich habe den Link ausgecheckt und er funktioniert gut.

Es implementiert jedoch nur eine Doubletap-Funktion jQuery function.

Ich brauchte ein benutzerdefiniertes doubletap event, an das ich binden/delegieren konnte. d.h.

$('.myelement').bind('doubletap', function(event){
    //...
});

Dies ist vor allem dann wichtig, wenn Sie eine Backbone.js-Stil-App schreiben, bei der viel Ereignisbindung stattfindet.

Also nahm ich Raul Sanchez 'Arbeit und machte daraus ein "jQuery special event".

Schauen Sie hier: https://Gist.github.com/1652946 Könnte jemandem nützlich sein.

11
asgeo1

Sie können auch jQuery Finger verwenden, das auch die Delegierung von Ereignissen unterstützt:

Für longtap:

// direct event
$('selector').on('press', function() { /* handle event */ });

// delegated event
$('ancestor').on('press', 'selector', function() { /* handle event */ });

Für Doppeltippen auf:

// direct event
$('selector').on('doubletap', function() { /* handle event */ });

// delegated event
$('ancestor').on('doubletap', 'selector', function() { /* handle event */ });
6
ngryman

Verwenden Sie einfach eine multitouch JavaScript-Bibliothek wie Hammer.js . Dann können Sie Code schreiben wie:

canvas
    .hammer({prevent_default: true})
    .bind('doubletap', function(e) { // Also fires on double click
        // Generate a pony
    })
    .bind('hold', function(e) {
        // Generate a Unicorn
    });

Es unterstützt Tippen, Doppeltippen, Streichen, Halten, Transformieren (d. H. Zwicken) und Ziehen. Die Berührungsereignisse werden auch ausgelöst, wenn entsprechende Mausaktionen ausgeführt werden. Sie müssen also nicht zwei Gruppen von Ereignishandlern schreiben. Oh, und Sie benötigen das jQuery-Plugin, wenn Sie auf die jQueryish-Weise wie ich schreiben möchten.

Ich habe eine sehr ähnliche Antwort auf diese Frage geschrieben, weil sie auch sehr beliebt ist, aber nicht sehr gut beantwortet wurde.

6
David Johnstone

Hier ist eine ziemlich grundlegende Übersicht über eine Funktion, die Sie für die Longtap erweitern können:

$('#myDiv').mousedown(function() {
    var d = new Date;
    a = d.getTime();
});

$('#myDiv').mouseup(function() {
    var d = new Date;
    b = d.getTime();

    if (b-a > 500) {
        alert('This has been a longtouch!');
    }
});

Die Zeitdauer kann durch den Block if in der Mouseup-Funktion definiert werden. Dies könnte wahrscheinlich auf ein gutes Geschäft angehoben werden. Ich habe ein jsFiddle für diejenigen, die damit spielen wollen.

EDIT: Ich habe gerade festgestellt, dass dies davon abhängt, dass mousedown und mouseup mit Fingerberührungen ausgelöst werden. Wenn dies nicht der Fall ist, ersetzen Sie die geeignete Methode ... Ich bin mit der mobilen Entwicklung nicht so vertraut.

2
eykanal

basierend auf den neuesten Jquery-Dokumenten habe ich ein Doubletap-Event geschrieben

https://Gist.github.com/attenzione/7098476

0
Attenzione
 function itemTapEvent(event) {
    if (event.type == 'touchend') {
        var lastTouch = $(this).data('lastTouch') || {lastTime: 0},
            now       = event.timeStamp,
            delta     = now - lastTouch.lastTime;

            if ( delta > 20 && delta < 250 ) {
                if (lastTouch.timerEv)
                  clearTimeout(lastTouch.timerEv);
                return;
            } else
                $(this).data('lastTouch', {lastTime: now});

            $(this).data('lastTouch')['timerEv'] = setTimeout(function() {
                $(this).trigger('touchend');
            }, 250);
    }
    }

    $('selector').bind('touchend', itemTapEvent);
0
tdjprog