¿Cómo puedo forzar a los elementos dentro de un elemento de posición fija a responder a eventos javascript onclick en el navegador web de Android?

En el código siguiente, el evento onclick nunca se activa cuando se usa el navegador android:

<div id="__log"></div> <div id="hud"> <div>Hello</div> <div> <a style="border:1px solid #fff;" href="#" onclick="document.getElementById('__log').innerHTML = document.getElementById('__log').innerHTML + '<br />clicked'; return false;">Click Me</a </div> </div> 

Estilo:

 #hud { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; padding: 10px; background:transparent url('gray95op.png') repeat; -webkit-transform: scale(1); -webkit-transition: all 0.25s ease-in-out; position: fixed; top:10px; left:0; right:0; margin:0 auto; width: 75%; z-index: 1001; color: #fff; text-align:center; } #hud a { color: #ccc; z-index:1002; } 

Esto funciona bien en Safari en iPhone y Chrome en escritorio.

Este es un ejemplo que puedes probar por ti mismo en un dispositivo Android: http://kortina.net/android.html

4 Solutions collect form web for “¿Cómo puedo forzar a los elementos dentro de un elemento de posición fija a responder a eventos javascript onclick en el navegador web de Android?”

Estoy bastante seguro de que el navegador de Android no es compatible con la posición fija. No creo que safari móvil en iphone tampoco, hasta que agregaron soporte en iOS 5. (algunas personas han recreado la posición fija usando javascript, es decir http://daringfireball.net/2009/12/pastrykit – post ios 5 esto va a Ya no es necesario)

¡SÍ! Por supuesto usted puede utilizar la posición fija. Es compatible con 2.2 en Android. Pero todavía es buggy. http://kentbrewster.com/android-scroller/ le muestra cómo. Básicamente es necesario deshabilitar el zoom en su con

 <meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1" /> 

Tuve el mismo problema que los eventos táctiles estaban cayendo a través de la posición fija. Finalmente averigué por qué. Usted necesita asegurarse de que el padre no tiene un hack como el uso de webkit translate3d o translateZ.

 -webkit-transform: translate3d(0, 0, 0); 

Por lo tanto, en mi marco web móvil hago lo siguiente. Creo que usted puede leer mi ejemplo de mi base de código:

 body:not([data-platform=android]) > .apps > section {-webkit-transform: translate3d(0, 0, 0);} 

Y ahí tienes, ahora la posición fija permitirá ahora los eventos de toque, ya que no se procesa con las transformaciones de webkit.

Puesto que usted está utilizando transforma en su elemento fijo, eso es problema qué está sucediendo. Pruebe a deshabilitar cualquier animación css3.

  1. Me gustaría favorecer el uso de id que empiecen con letras sólo en caso de que ciertos navegadores no sigan la definición de id del W3C .

  2. Un elemento vacío, como br , puede omitir el carácter de cierre automático en HTML5 . Si se trata de un cambio de estilo, tendría más sentido ajustar el estilo del elemento (CSS) (es decir, la altura) en lugar de su contenido (HTML).

  3. ¿Por qué no usar jQuery ? Es rápido, promueve JavaScript discreto y ya ha resuelto todos los problemas de compatibilidad entre navegadores relacionados con la gestión de eventos JavaScript . Además, Google optimiza la carga de la página inicial de la fuente jQuery (que a menudo ya está en caché en el navegador porque muchos otros sitios lo cargan).

    No he probado esto, pero según los documentos de jQuery en .click () y los documentos de jQuery en .css () , parecería algo como esto:

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script> $("#__log").click(function () { $(this).css('height', "+=10px"); }); </script> 

    Si eso no funciona en todos los navegadores modernos, incluyendo Android, yo presentaría un informe de error jQuery .

La solución es simplemente conectar un evento táctil a cualquier elemento no fijo que capte el evento táctil a medida que burbujea desde el elemento fijo.

Por ejemplo, adjuntar un evento a la ventana:

 $(window).on('touchstart', function () {}); 

Todos los eventos táctiles se propagarán a la ventana, incluso desde elementos de posición fija. Esto es claramente una corrección de errores, pero funciona.

Originalmente respondí sobre este tema, ya que fue presentado en Github, por lo que puede ver el informe completo aquí:

https://github.com/jquery/jquery-mobile/issues/3912

  • Textarea no envuelve texto en WebView en Android
  • ¿Cómo puedo obtener esta aplicación de pintura de lienzo HTML5 para que funcione tanto para eventos de contacto como para ratón?
  • Slow eventos de toque de Javascript en Android
  • Uso de la memoria que sube en la aplicación PhoneGap
  • ¿Hay alguna manera de restringir un sitio web para que solo se muestre en Android?
  • ¿Cómo puedo recuperar una cadena de Javascript en Android?
  • ToolBarAndroid no representa en ReactNative
  • ¿Podría alguien de una vez por todas explicar por favor No puedo llamar a determinedVisibility () - nunca vi una conexión para el pid
  • Cómo deshabilitar la rotación de la pantalla (reaccionar-nativo)?
  • API de la cámara PhoneGap para Android - Excepción no captada
  • Android 2.2 SDK - Inseguro JavaScript intenta acceder al marco con la URL - Google Checkout
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.