jquery - ontouchstart - Haga clic en el evento llamado dos veces en touchend en iPad

touchmove event javascript

Question

Estoy usando jquery animate para la diapositiva. Tengo una flecha al final de la diapositiva y dado el evento de clic en esa flecha. El funcionamiento de la misma es mover un elemento dentro de la pantalla al hacer clic y mover toda la esfera en la posición de ratón. Esto funciona bien en el escritorio, pero en el iPad dos elementos entran dentro de la diapositiva al hacer clic. No entiendo por qué el evento de clic se llama dos veces en iPad. El código de muestra para el clic es:

    $(''#next_item'').bind(''mousedown touchstart MozTouchDown'',function(e) {                    
        $(''.slide'').animate({left:left},6000);   
    });

    $(''#next_item'').bind(''mouseup touchend MozTouchRelease'',function(e) {   
        No.nextItem();          
    });

#next_item es el id de la flecha al final de la diapositiva. He intentado unbind evento de touchstart y de touchend , pero durante el desplazamiento de la diapositiva debido a que el elemento no está touchend , no aparece dentro de la diapositiva después de un solo elemento. No.nextItem() mueve un elemento dentro de la diapositiva. left en $(''.slide'') es mover la diapositiva a la izquierda. Por favor, ayúdeme a encontrar la solución por la que sucede esto y cómo resolver este problema para ipad.

Answer 1

El iPad comprende tanto el comando touchstart / -end y mousestart / -end.

Se despide así:

┌─────────────────────┬──────────────────────┬─────────────────────────┐
│Finger enters tablet │ Finger leaves tablet │ Small delay after leave │
├─────────────────────┼──────────────────────┼─────────────────────────┤
│touchstart           │ touchend             │ mousedown               │
│                     │                      │ mouseup                 │
└─────────────────────┴──────────────────────┴─────────────────────────┘

Tiene que detectar si el usuario está en una tableta y luego retransmitir con el toque comenzar cosas ...:

/********************************************************************************
* 
* Dont sniff UA for device. Use feature checks instead: (''touchstart'' in document) 
*   The problem with this is that computers, with touch screen, will only trigger 
*   the touch-event, when the screen is clicked. Not when the mouse is clicked.
* 
********************************************************************************/
var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
var myDown = isIOS ? "touchstart" : "mousedown";
var myUp = isIOS ? "touchend" : "mouseup";

y luego atarlo de esta manera:

$(''#next_item'').bind(myDown, function(e) { 

También puedes hacer un evento que lo cuide, ver:

http://benalman.com/news/2010/03/jquery-special-events/

Evento básico normalizado hacia abajo:

$.event.special.myDown = {
    setup: function() {
        var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
        var myDown = isIOS ? "touchstart" : "mousedown";
        $(this).bind(myDown + ".myDownEvent", function(event) {
            event.type = "myDown";
            $.event.handle.call(this, event);
        });
    },
    teardown: function() {
        $(this).unbind(".myDownEvent");
    }
};

Después de que jQuery 1.9.0 $.event.handle cambió el nombre a $.event.dispatch , para admitir que ambos pueden escribir, utilice este respaldo:

// http://.com/questions/15653917/jquery-1-9-1-event-handle-apply-alternative
// ($.event.dispatch||$.event.handle).call(this, event);
$.event.special.myDown = {
    setup: function() {
        var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
        var myDown = isIOS ? "touchstart" : "mousedown";
        $(this).bind(myDown + ".myDownEvent", function(event) {
            event.type = "myDown";
            ($.event.dispatch||$.event.handle).call(this, event);
        });
    },
    teardown: function() {
        $(this).unbind(".myDownEvent");
    }
};

Answer 2

Tenga cuidado al usar un rastreador de UA para iPad / iPod. ¡Estás abandonando todos los dispositivos Android con una solución como esa! Una mejor solución es detectar el soporte táctil, funcionará en todos los dispositivos móviles / tabletas:

var isTouchSupported = "ontouchend" in document;