verificacion - ¿Por qué/cuándo tengo que tocar dos veces para activar el clic en iOS?

el boton de volumen de mi iphone no funciona

Question

Ok me siento como si estuviera loca ...

Estoy viendo Mobile Safari en iOs 6.0. Parece que no puedo establecer ninguna rima o razón sobre cuándo tocar un elemento disparará un clic. En muchos casos, parece que necesito tocar una vez para activar un desplazamiento y luego otra vez para activar un clic.

La especificación de Mobile Safari dice: "... El flujo de eventos generados por gestos de un dedo y de dos dedos son condicionales dependiendo de si el elemento seleccionado es seleccionable o desplazable ... Un elemento seleccionable es un enlace, elemento de formulario , área de mapa de imagen, o cualquier otro elemento con los controladores mousemove, mousedown, mouseup u onclick ... Debido a estas diferencias, es posible que necesite cambiar algunos de sus elementos a elementos seleccionables ... "

Continúa sugiriendo que el desarrollador "... Agregue un controlador ficticio onclick, onclick =" void (0) ", para que Safari en iOS reconozca el elemento span como un elemento pulsable".

Sin embargo, mi prueba ha demostrado que estas afirmaciones son falsas.

JsFiddle: http://jsfiddle.net/6Ymcy/1/

html

<div id="plain-div" onclick="void(0)">Plain Div</div>

js

document.getElementById(''plain-div'').addEventListener(''click'', function() {
   alert(''click''); 
});

Intenta tocar el elemento en un iPad. No pasa nada

Pero yo divago. Lo que es importante para mí es encontrar la siguiente pregunta:

¿Cuáles son exactamente los criterios que determinan cuándo hacer clic en un elemento activará un evento de "clic" en el primer toque? A diferencia de disparar un evento de ''desplazamiento'' en el primer toque y un evento de ''clic'' en el segundo toque.

En mi prueba, los elementos de anclaje son los únicos elementos que puedo hacer para disparar un clic en el primer toque, y luego, solo de manera ocasional e inconsistente.

Aquí es donde empiezo a sentirme loco. Busqué en internet por todas partes y no encontré casi nada sobre este problema. ¡¿Se trata sólo de mí?! ¿Alguien sabe dónde ha habido alguna discusión sobre los criterios para dos toques y un enfoque para lidiar con estas limitaciones?

Estoy feliz de responder a las preguntas / solicitudes.

¡Gracias!

Answer 1

Estaba buscando en Google para ver si podía ayudarte y encontré este fragmento de código. Intente modificarlo a su gusto y vea si puede hacer lo que está intentando. Si tiene problemas para entenderlo, hágamelo saber y elaboraré más. También hay algo más aquí donde lo encontré.

Función Jquery Hover y clic en la tableta.

$(''clickable_element'').live("touchstart",function(e){
    if ($(this).data(''clicked_once'')) {
        // element has been tapped (hovered), reset ''clicked_once'' data flag and return true
        $(this).data(''clicked_once'', false);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set ''clicked_once'' data flag to true
        e.preventDefault();
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
        $(this).data(''clicked_once'', true);
    }
});

Answer 2

La pantalla: ninguna; La solución mencionada anteriormente funciona en iOS (no probada más tarde que 9.3.5), pero no en Android.

Una solución hacky css-only es ocultar el enlace debajo del elemento usando un índice z negativo y llevar el enlace a un índice z positivo en: hover o primer toque (con un pequeño retardo de transición). Supongo que se podría lograr el mismo resultado con css translate en lugar de z-index. Funciona en iOS y Android.

De esta manera, puede mostrar un efecto de desplazamiento en un enlace en un dispositivo de pantalla táctil con el primer toque sin activar la URL hasta un segundo toque.

Answer 3

Mi solución fue eliminar el estado: hover del css, y cuando lo pienses, los navegadores móviles no deberían tener el estado: hover, ya que no hay ningún hover ...

Si desea mantener el estado de desplazamiento en el escritorio, puede usar la consulta de medios, de este modo:

.button {
    background: ''#000''
}

@media (min-width: 992px) {
    .button:hover {
        background: ''#fff''
    }
}

Answer 4

Nunca resolví los criterios, pero esto resolvió mi problema activando instantáneamente un clic tan pronto como se toca un elemento:

https://developers.google.com/mobile/articles/fast_buttons

Tuve que hacer una serie de adiciones / modificaciones a su código para que funcione correctamente. Avíseme si está interesado en mi método e intentaré publicar una explicación.

Saludos :)

Answer 5

Resolví este problema detectando primero si era un iPhone y luego vinculaba el evento mouseup a la función a la que estaba intentando llamar.

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){ 
    $(''foo'').on(''mouseup'', function(){
        ...
    }
}

Probé otros eventos pero mouseup pareció funcionar mejor. Otros eventos, como el panel táctil, se activaban incluso si el usuario intentaba desplazarse. Mouseup no parece ser despedido si arrastra el dedo después de tocar.

Crédito David Walsh (y ESPN) para la detección de iPhone. http://davidwalsh.name/detect-iphone

Answer 6

También vale la pena mencionar que la pseudo-clase '': hover'' puede evitar que se active el evento ''click''.

Como en los navegadores móviles, el clic a veces se usa para reemplazar la acción de desplazamiento (por ejemplo, para mostrar el menú desplegable), pueden desencadenar el estado de "desplazamiento" artificial en el primer clic y luego manejar el clic en el segundo.

Consulte https://css-tricks.com/annoying-mobile-double-tap-link-issue/ para obtener una explicación detallada y ejemplos de eso.

Answer 7

Tenía este problema usando Bootstrap, y descubrí que el culpable era la información sobre herramientas. Quita la información sobre herramientas del botón y ya no tendrás que tocarla dos veces.

Answer 8

Tuve el mismo problema. La solución más simple es no vincular el evento '' mouseenter '' en iOS (o en cualquier plataforma de destino habilitada para contacto). Si eso no está vinculado, el evento de desplazamiento no se activará y el clic se activará en el primer toque.

Answer 9

iOS activará el evento de desplazamiento si un elemento es "mostrar: ninguno"; en el estado normal y "display: block;" o en línea de bloque en: hover.

Answer 10

todo esto porque en iOS, el primer toque actúa como desplazamiento, el segundo toque actúa como clic.

Puedes eliminarlo agregando este script jQuery.

$(''a'').on(''click touchend'', function(e) { var el = $(this); var link = el.attr(''href''); window.location = link; });