web-dev-qa-db-fra.com

Quelle est la meilleure façon de gérer des événements de tapotement long et de tapotement prolongé sur des appareils mobiles utilisant jQuery?

Je cherche la meilleure solution pour ajouter à la fois les événements "doubletap" et "longtap" à utiliser avec les fonctions live (), bind () et trigger () de jQuery. J'ai lancé ma propre solution rapide, mais c'est un petit buggy. Quelqu'un a-t-il des plugins à recommander ou des implémentations qu'il souhaite partager?

javascriptjqueryiphoneeventsmobile
27
Luke Dennis

Il a été rapporté que jQuery était un bogue, mais comme le doubletapping n’est pas la même chose que le double-clic, il n’a pas une priorité élevée. Cependant, le cerveau Raul Sanchez a codé une solution jquery pour doubletap que vous pouvez probablement utiliser! Voici le lien , fonctionne sur Safari mobile.

C'est facile à utiliser:

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

-modifier-

Et il y a un plugin longtap ici ! Vous pouvez voir une démo sur votre iPad ou iPhone ici .

19
rsplak

la réponse de rsplak est bonne. J'ai vérifié ce lien et cela fonctionne bien.

Cependant, il ne met en œuvre qu'un doubletap jQuery function

J'avais besoin d'un doubletap event personnalisé auquel je pouvais me lier/déléguer. c'est à dire.

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

Ceci est plus important si vous écrivez une application de style backbone.js, dans laquelle de nombreuses liaisons d'événements sont en cours.

J'ai donc pris le travail de Raul Sanchez et l'ai transformé en "événement spécial jQuery".

Jetez un coup d'œil ici: https://Gist.github.com/1652946 Peut-être utile à quelqu'un.

11
asgeo1

Vous pouvez également utiliser jQuery Finger qui prend également en charge la délégation d'événements:

Pour longtap:

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

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

Pour double tap:

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

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

Utilisez simplement une bibliothèque JavaScript multitouch telle que Hammer.js . Ensuite, vous pouvez écrire du code comme:

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

Il prend en charge tapotement, tapotement double, glisser, tenir, transformer (pincer) et faire glisser. Les événements tactiles se déclenchent également lorsque des actions équivalentes de la souris se produisent. Vous n'avez donc pas besoin d'écrire deux ensembles de gestionnaires d'événements. Oh, et vous avez besoin du plugin jQuery si vous voulez pouvoir écrire de la manière jQueryish comme je l’ai fait.

J'ai écrit une réponse très similaire à cette question parce que c'est aussi très populaire mais pas très bien répondu.

6
David Johnstone

Voici un aperçu de base d'une fonction sur laquelle vous pouvez vous appuyer pour le longtap:

$('#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!');
    }
});

La durée peut être définie par le bloc if dans la fonction mouseup. Cela pourrait probablement être renforcé sur une bonne affaire. J'ai un jsFiddle mis en place pour ceux qui veulent jouer avec.

EDIT: Je viens de me rendre compte que cela dépend de mousedown et mouseup être tiré avec des doigts. Si ce n'est pas le cas, alors substituez la méthode appropriée ... Je ne connais pas très bien le développement mobile.

2
eykanal

sur la base de la dernière documentation jquery j'ai écrit l'événement doubletap

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