2012-01-17 7 views
10

MobileSafari como norma tiene un comportamiento incorrecto de los botones HTML (significado incorrecto: "no como un botón nativo de iOS"). comportamiento del botón correcto es el siguiente:Comportamiento correcto de los botones táctiles para MobileSafari

  • usuario toca el botón: botón destaca
  • usuario arrastra el dedo fuera del botón: Botón atenúa
  • usuario arrastra el dedo de nuevo en el botón: botón destaca
  • usuario arrastra el dedo a cabo de botón y comunicados: botón no hace clic

MobileSafari botones de relieve cuando se tocan, estancia marcada no importa cuando planees Si se mueve, haga clic sin importar dónde lo suelte (a menos que la vista se desplace, en cuyo caso el toque siempre se cancela, incluso si vuelve a ingresar el botón).

Este problema se aplica a todos los elementos en los que se puede hacer clic, como los enlaces (cuando -webkit-touch-callout está establecido en none). Hasta ahora, solo he encontrado una aplicación web que tiene el comportamiento correcto de los botones: Facebook. Al ver su código, parece que han hecho bastantes saltos para que funcione correctamente (rastreando todos los eventos del mouse manualmente y sin usar botones). El código es denso, usa Javelin, y aún no tengo claro todas las piezas necesarias para que funcione.

Sé que estoy bromeando (ya que si fuera fácil, todos lo harían), pero voy a preguntar de todos modos. ¿Hay alguna pieza de código generalmente disponible que maneje esta característica? ¿Existe una solución más simple que la ingeniería inversa Javelin, incluso si solo es aplicable a WebKit? (Javelin no es muy adecuado para mis necesidades ligeras). Mi objetivo final es el comportamiento correcto de los botones para un UIWebView incrustado en una aplicación nativa, por lo que también son aceptables las soluciones híbridas JavaScript/ObjC (aunque no vienen a la mente enfoques híbridos) .

Respuesta

1

Básicamente lo que desea hacer es construir algún tipo de hover hover funcionalidad para dispositivos táctiles, que detecta cuando su dedo se mueve dentro/fuera del botón en cuestión.

Creé un JSFiddle básico que implementa algunas funciones de barebones. Si conoces algún javascript, creo que entenderás.

Live JSFiddle DEMO

Pruébalo en tu dispositivo iOS (y tal vez su dispositivo Android ??).

- Brian

+1

por lo que he tratado de evitar la adición de (y el aprendizaje: D) jQuery para el poco de la web que estoy usando en esta aplicación particular, pero su demostración es bastante impresionante. Gracias. Necesito jugar con eso un poco más, ya que me parece que se comporta un poco complicado en MobileSafari (de vez en cuando se dispara cuando no se cree que lo haría, y algunas veces no se restablece del todo bien). Pero los conceptos básicos son muy interesantes. Tendré que volver a pensar en mi evitación de JQuery ya que recientemente he estado luchando bastante contra JavaScript escrito a mano. –

+0

Sí, un poco inestable cuando te desplazas hacia arriba o hacia abajo. Y ciertamente no cubre todos los casos de borde, pero moverse dentro/fuera del botón horizontalmente funciona bastante bien. La mejor manera de aprender jQuery es simplemente abrir un JSFiddle y empezar a jugar con elementos HTML. – briangonzalez

Cuestiones relacionadas