example - ¿mousedown/mouseup en jquery funciona para el ipad?

mousein

Question

Estoy usando el código actual:

$(''body'').mousedown(function() {
        $(''div#extras'').fadeTo(''fast'', 1);
});

$(''body'').mouseup(function() {
        $(''div#extras'').delay(2000).fadeTo(1500, 0);
});

Esto funciona muy bien en safari, pero cuando lo subo y lo miro en el iPad, ¿no funciona?

Answer 1

Descubrí cómo hacer esto para el iPad para aquellos que estén interesados:

En lugar del código que utilicé en mi pregunta, usarías:

$(''body'').bind( "touchstart", function(e){
        $(''div#extras'').fadeTo(''fast'', 1);
});

&

$(''body'').bind( "touchend", function(e){
        $(''div#extras'').delay(2000).fadeTo(1500, 0);
});

Answer 2

No exactamente.

Apple Docs

Citar:

Un elemento seleccionable es un enlace, un elemento de formulario, un área de mapa de imagen o cualquier otro elemento con mousemove, mousedown , mouseup o onclick handlers. Un elemento desplazable es cualquier elemento con un estilo de desbordamiento adecuado, áreas de texto y elementos iframe desplazables. Debido a estas diferencias, es posible que deba cambiar algunos de sus elementos a elementos en los que se puede hacer clic, como se describe en " Hacer que los elementos se puedan hacer clic ", para obtener el comportamiento deseado en iPhone OS.

(énfasis mío)

Answer 3

No responde realmente su pregunta, pero puede ser útil para las personas que vinieron aquí solo para buscar ''jQuery mousedown / mouseup en ipad''

Yo siempre uso este pequeño truco:

$(element).hover(function() {
   // Do something
});

Esto se activa cuando se usa un iPad y revierte la acción al hacer clic fuera del elemento, ya que se trata de un evento de desplazamiento. Así por ejemplo:

// Assuming the element has ''opacity: 0'' in CSS

$(element).hover(function() {
   $(this).animate({''opacity'': 1}, 200);
});

Crea un desvanecimiento en efecto ''al hacer clic'', y un efecto de desvanecimiento ''en el mouse''.

Answer 4

Publicaciones antiguas pero hay una solución universal:

$(''body'').on(''mousedown touchstart'',function(e){
    $(''div#extras'').fadeTo(''fast'', 1);
});
$(''body'').on(''mouseup touchend'',function(e){
    $(''div#extras'').delay(2000).fadeTo(1500, 0);
});