¿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

  • Código de error del complemento de medios: 1
  • Cambio de hoja de estilo con Javascript basado en navegador
  • PhoneGap readAsDataURL
  • Alerta de cierre de la caja cuando el usuario toca la pantalla en blanco en Javascript
  • ¿Cuál es el equivalente de setTimeOut () javascript a Android?
  • Html5 requiere validación trabajando muy bien en el navegador pero no en la aplicación de phonegap
  • PhoneGap plugin: la forma más rápida de transferir datos JSON a nativo
  • Uso de Javascript en la vista web
  • Rendimiento del androide Sencha Touch 2
  • JavaScript visibilitchange Evento no dispara en Chrome móvil
  • Dropdowns de Bootstrap de Twitter Unclickable en tabletas
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.