pasar - funcion click en javascript

¿Cuál es la mejor manera de manejar eventos longtap y de doble toque en dispositivos móviles usando jQuery?

Question

Estoy buscando la mejor solución para agregar eventos "doubletap" y "longtap" para usar con live (), bind () y trigger () de jQuery. Lancé mi propia solución rápida, pero es un poco problemático. ¿Alguien tiene complementos que recomendarían o implementaciones propias que les gustaría compartir?

Answer 1

Aquí hay un esquema bastante básico de una función que puede ampliar para 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!'');
    }
});

El período de tiempo se puede definir mediante el bloque if en la función de mouseup. Esto probablemente podría reforzarse con un buen trato. Tengo un jsFiddle configurado para aquellos que quieran jugar con él.

EDITAR: Me acabo de dar cuenta de que esto depende de que mousedown y mouseup se disparen con toques de dedos. Si ese no es el caso, sustituya lo que sea que sea el método apropiado ... No estoy tan familiarizado con el desarrollo móvil.

Answer 2

La respuesta de rsplak es buena. Revisé ese enlace y funciona bien.

Sin embargo, solo implementa una función jQuery doubletap

Necesitaba un evento de doble repetición personalizado al que pudiera vincular / delegar. es decir

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

Esto es más importante si está escribiendo una aplicación de estilo backbone.js, donde hay mucho enlace de eventos en curso.

Así que tomé el trabajo de Raúl Sánchez y lo convertí en un "evento especial jQuery".

Echa un vistazo aquí: https://gist.github.com/1652946 Puede ser útil para alguien.

Answer 3

Se ha informado que jQuery es un error, pero como el doble enlace no es lo mismo que hacer doble clic, no tiene una alta prioridad. ¡Sin embargo, el cerebro Raul Sanchez codificó una solución jquery para doubletap que probablemente puedas usar! Aquí está el enlace , funciona en Safari móvil.

Es fácil de usar:

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

-editar-

¡Y hay un complemento longtap here ! Puedes ver una demostración en tu iPad o iPhone here .

Answer 4

Solo use una biblioteca de JavaScript multitouch como Hammer.js . Entonces puedes escribir código como:

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 compatible con tocar, tocar dos veces, deslizar, mantener, transformar (es decir, pellizcar) y arrastrar. Los eventos táctiles también se activan cuando ocurren acciones de mouse equivalentes, por lo que no es necesario escribir dos conjuntos de controladores de eventos. Ah, y necesitas el plugin jQuery si quieres poder escribir en la forma jQuery como yo lo hice.

Escribí una respuesta muy similar a esta pregunta porque también es muy popular pero no muy bien respondida.

Answer 5

También puede usar jQuery Finger, que también admite la delegación de eventos:

Para longtap :

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

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

Para doble toque :

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

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

Answer 6

basado en los últimos documentos de jquery, he escrito el evento doubletap

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

Answer 7

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