¿Cómo implementar onclick en javascript y html para dispositivos con versiones inferiores de android?

Estoy trabajando en un proyecto que funciona perfectamente en dispositivos con una versión superior, lo he comprobado en la versión 4.1.2.

El problema es que no funciona en dispositivos con Android 2.2.1 y 2.3.5.

Tengo seis imágenes a las que he añadido funcionalidades. La funcionalidad para 2 imágenes es llamar a una página HTML diferente con el valor id. La funcionalidad para las otras cuatro imágenes es también la misma, pero las imágenes se mostrarán en función del valor de la base de datos.

La funcionalidad para 2 imágenes es llamar a una página HTML diferente con el valor id.

Así es como he codificado ..

<div id="header " class="header "> <div id="header_title" class="header_title"> </div> <div id="abc" class="abc"><img src="img/abc.png" onClick="abc()"/></div> -----so -on 

He declarado la función abc como

 function abc(){ window.location.href="index.html"; } 

La funcionalidad para las otras cuatro imágenes es también la misma, pero las imágenes se mostrarán en función del valor de la base de datos.

 if(value_in_db==0) { document.getElementById("xyz").innerHTML = '<img src="img/inactive.png" />' } else { document.getElementById("xyz").innerHTML = '<img src="img/active.png" onclick="xyz()"/> ' } 

He declarado la función xyz como

 function xyz(){ window.location.href="basic.html"; } 

Enfrentamiento de problemas:

La funcionalidad de onclick funciona de vez en cuando en android versión 2.2.1 y 2.3.5.when seguir intentando hacer clic de repente la función se llama. He intentado corregir este error durante casi 2 días.

Yo había enfrentado un problema similar con la posición CSS: fijo. Esto no fue apoyado en las versiones inferiores de android.I fue sugerido con una solución aquí .

He intentado con esta función addEventListener que no funcionó para mí.

Espero conseguir una solución para este problema.

Por favor, ayúdame a arreglar esto y guíame!

EDIT: 1 touchvent y deviceready

 document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener( "touchstart", function(e){ onStart(e); }, false ); function onStart ( touchEvent ) { if( navigator.userAgent.match(/Android/i) ) { touchEvent.preventDefault(); } } 

Esto funciona en la versión final más alta pero no en la versión final inferior. Sé que su sin fundamento mencionar 2 document.addEventListener ..como trabajó en las versiones superiores.i continuó.

Esto es bastante funcionalidad básica y debería funcionar en todas las versiones de Android – ¿está seguro de que no es otra cosa en su código que causa el problema?

He probado este caso de prueba con la última Cordova 2.8.0 en mi HTC HD2 que está ejecutando Android 2.3.4 y funciona muy bien:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript"> function abc(){ window.location.href="foo.html"; } </script> </head> <body> <h1>Index page</h1> <div id="abc" class="abc"><img src="img/abc.jpg" onClick="abc()"/></div> </body> </html> 

Puede descargar mi proyecto de prueba de Eclipse y compilar APK aquí y probarlo en sus dispositivos.

UPDATE basado en su código JSFiddle:

Su HTML contiene varios errores de sintaxis – uno de estos puede estar causando problemas con Android 2.x mientras que 4.x puede ser más tolerante a errores:

1) El atributo #header id contiene espacios en blanco. Reemplazar

<div id="header " class="header "> con <div id="header" class="header">

2) Los valores de los atributos deben ser citados. Reemplazar <img name="slide" src="img/abc.jpg" width=100%; /> <img name="slide" src="img/abc.jpg" width=100%; /> Con <img name="slide" src="img/abc.jpg" width="100%" />

3) Tiene una etiqueta div de cierre adicional. Reemplazar

 <div id="footer" class="footer"> <div id="footer_text" style="color:#ffffff">footer</div> </div> </div> 

con

 <div id="footer" class="footer"> <div id="footer_text" style="color:#ffffff">footer</div> </div> 

No puedes usar todos los eventos en la página.

Si usted ata mousedown, mouseup, tecleo, touchstart etc. Hay muchos de la combinación.
Sugiero: – implementar dispositivo / detector de navegador – luego adjuntar para el toque móvil y para los eventos de clic de escritorio

  • Puede utilizar la combinación, pero utilizar todos los clics y sólo una variante de toque o todo el tacto y un evento de escritorio clásico.

Mejor combinación: onClick y sólo un mousedown o mouseup. Luego implementar algún evento táctil si tiene un problema con alguna función.

También puede poner código simple como este:

 <div onClick="CALL();" ontouchstart="CALL();" > 

Puede encontrar mi script de navegador / dispositivo de detección en esta respuesta: Pregunta-respuesta similar

Usted puede descargar Custom Jquery Mobile Download con sólo Virtual Mouse (vmouse) Bindings seleccionados.

Incluya este javascript generado en su código y use el fragmento de código.

 $(document).on('vclick', '.popmenu', function(event){ // DO stuff }); 

El evento de clic ahora estará trabajando en la versión de escritorio / móvil en contenido precargado y dinámico con class='popmenu'

  • Establecer OnClickListener para elementos en ListView con 2 vistas
  • Listview no se puede hacer clic cuando se puede seleccionar la vista de texto dentro de esa vista de lista
  • OnClickListener en pestañas no funciona
  • Android OnClickListener no dispara en GridView (sólo 2.2)
  • Eventos de ruta / burbuja de Android porque un control está consumiendo el evento onClick
  • Android listview obtiene el elemento seleccionado
  • Descartar Snackbar A la izquierda deslizar
  • Cambiar el fondo ListView - comportamiento extraño
  • Cómo ejecutar "callOnClick ()" para Android API 8?
  • OnItemClickListener usando ArrayAdapter para ListView
  • ¿Una mejor manera de hacer clic en OnClick para los campos EditText?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.