Quelle est la meilleure façon de gérer longtap et double-tap événements sur des appareils mobiles à l'aide de jQuery?

Je suis à la recherche de la meilleure solution pour l'ajout de deux "doubletap" et "longtap" des événements pour une utilisation avec du jQuery live(), bind() et trigger(). J'ai roulé ma propre solution rapide, mais il est un peu buggé. Quelqu'un aurait-il des plugins de recommander, ou implantations de leur propre qu'ils aimeraient partager?

Quel est le vôtre ressemble? On peut peut-être résoudre ce problème?

InformationsquelleAutor Luke Dennis | 2011-03-31

20

Il a été signalé à jQuery comme un bug, mais comme doubletapping n'est pas le même que le double-cliquant sur, il n'a pas une haute priorité. Cependant, mastermind Raul Sanchez codé un jquery solution pour doubletap que vous pouvez probablement utiliser!
Voici le lien, fonctionne sur le navigateur Safari mobile.

Il est facile à utiliser:
```
$('selector').doubletap(function() {});
```
-edit-

Et il y a un longtap plugin ici! Vous pouvez voir une démo sur votre iPad ou iPhone ici.
- Le doubletap plugin ne pas vérifier la position. Si vous relâchez votre doigt à un endroit différent de celui où vous avez commencé, alors il ne devrait pas compter comme un doubletap.
- ce plugin fonctionne très mal en cas de geste multitouch sur le sélecteur. ne pas l'utiliser
- +0 N'a pas downvote parce que techniquement cela fonctionne.. cela dit, il ne fonctionne pas bien et ça ne fonctionne pas avec on() ni delegate() etc. C'est quelque chose, mais je ne le recommande pas à n'importe qui. Il est préférable si vous pouvez l'éviter en s'appuyant sur doubletap.
- Toute mise en œuvre sur Android? Merci!!!!
InformationsquelleAutor rsplak
11

rsplak la réponse est bonne. J'ai vérifié le lien et il fonctionne bien.

Cependant, elle ne met en œuvre un doubletap jQuery fonction

J'avais besoin d'un custom doubletap événement que j'ai pu lier/délégué à. c'est à dire
```
$('.myelement').bind('doubletap', function(event){
    //...
});
```
Ce qui est plus important si vous êtes à la rédaction d'un backbone.js application de style, où il y a beaucoup de cas de la liaison en cours.

J'ai donc pris Raul Sanchez du travail, et l'a transformé en un "jQuery événement spécial".

Ont un coup d'oeil ici: https://gist.github.com/1652946 Pourrait être utile à quelqu'un.
- Il est intéressant de noter que, pour faire ce cross plate-forme, vous devez lier les deux dblclick et doubletap: $('.myelement').bind('dblclick doubletap', function(event){ /* Stuff */ });
InformationsquelleAutor asgeo1
6

Il suffit d'utiliser un multitouch bibliothèque JavaScript comme 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 le toucher, le double tap, glisser, tenir, de transformation (c'est à dire, une pincée) et faites-la glisser. Les événements tactiles également d'incendie lors de l'équivalent en actions de la souris se produire, de sorte que vous n'avez pas besoin d'écrire deux ensembles de gestionnaires d'événements. Oh, et vous avez besoin du plugin jQuery si vous voulez être en mesure d'écrire dans le jQueryish façon comme je l'ai fait.

J'ai écrit, très semblable à la réponse à cette question parce que c'est aussi très populaires, mais pas très bien répondu.

InformationsquelleAutor David Johnstone
6

Vous pouvez également utiliser jQuery Doigt qui prend également en charge de l'événement délégation:

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 */ });
```
- Basé sur la haine pour la accepté de répondre, je suis allé avec Ngryman de jQuery Doigt. Il a parfaitement fonctionné. Merci homme.
- C'est la seule solution que j'ai pu trouver de travail avec double-cliquant sur un appareil mobile avec la jeditable plugin jquery.
InformationsquelleAutor ngryman
2

Voici une jolie forme de base d'une fonction, vous pouvez étendre la 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 longueur de temps peut être défini par l' if bloc dans le mouseup fonction. C'est probablement ce qui pourrait être renforcé sur une bonne affaire. J'ai un jsFiddle mis en place pour ceux qui veulent jouer avec elle.

EDIT: je viens de réaliser que cela dépend mousedown et mouseup être tiré avec les doigts. Si ce n'est pas le cas, alors substitut quelle que soit la méthode appropriée est... je ne suis pas familier avec le développement mobile.

InformationsquelleAutor eykanal
0

basé sur la dernière version de jquery docs que j'ai écrit doubletap événement

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

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

InformationsquelleAutor tdjprog

Vous devez vous connecter pour publier un commentaire.