I am working on a project which works perfectly in devices with higher version-I have checked it in 4.1.2 version.

The problem is that it is not working in devices with android version 2.2.1 and 2.3.5.

I have six images to which I have added functionalities. The functionality for 2 images is to call a different HTML page with the id value. The functionality for the other four images is also the same,BUT the images will display based on the database value.

The functionality for 2 images is to call a different HTML page with the id value.

This is how I have coded..

<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

I have declared the abc function as

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

The functionality for the other four images is also the same,BUT the images will display based on the database value.

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()"/> '
}

I have declared the xyz function as

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

Problem Facing:

The onclick functionality functions once in a while in android version 2.2.1 and 2.3.5.when keep on trying to click suddenly the function is called. I have tried fixing this error for almost 2 days.

I had faced a similar problem with the CSS position:fixed. This was not supported in the lower versions of android.I was suggested with a solution here.

I have tried with this addEventListener function it did not work for me.

I hope I get a solution for this problem to.

Please help me to fix this and guide me!

EDIT :1 touchevent and 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();
   }
}

This works in the higher end version but not in the lower end version. I know its baseless to mention 2 document.addEventListener..as it worked in the higher versions.i continued it.

I am working on a project which works perfectly in devices with higher version-I have checked it in 4.1.2 version.

The problem is that it is not working in devices with android version 2.2.1 and 2.3.5.

I have six images to which I have added functionalities. The functionality for 2 images is to call a different HTML page with the id value. The functionality for the other four images is also the same,BUT the images will display based on the database value.

The functionality for 2 images is to call a different HTML page with the id value.

This is how I have coded..

<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

I have declared the abc function as

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

The functionality for the other four images is also the same,BUT the images will display based on the database value.

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()"/> '
}

I have declared the xyz function as

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

Problem Facing:

The onclick functionality functions once in a while in android version 2.2.1 and 2.3.5.when keep on trying to click suddenly the function is called. I have tried fixing this error for almost 2 days.

I had faced a similar problem with the CSS position:fixed. This was not supported in the lower versions of android.I was suggested with a solution here.

I have tried with this addEventListener function it did not work for me.

I hope I get a solution for this problem to.

Please help me to fix this and guide me!

EDIT :1 touchevent and 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();
   }
}

This works in the higher end version but not in the lower end version. I know its baseless to mention 2 document.addEventListener..as it worked in the higher versions.i continued it.

• javascript
• android
• html
• onclick
• cordova

3 Answers 3

This is pretty basic functionality and should work on all versions of Android - are you sure it's not something else in your code causing the problem?

I tried this test case using the latest Cordova 2.8.0 on my HTC HD2 which is running Android 2.3.4 and it works consistently fine:

<!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>

You can download my Eclipse test project and piled APK here and try it on your devices.

UPDATE based on your JSFiddle code:

Your HTML contains several syntax errors - one of these may be causing issues with Android 2.x whereas 4.x may be more error tolerant:

1) The #header id attribute contains trailing whitespace. Replace

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

2) Attribute values should be quoted. Replace <img name="slide" src="img/abc.jpg" width=100%; /> with <img name="slide" src="img/abc.jpg" width="100%" />

3) You have an extra closing div tag. Replace

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

with

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

You cant use all events on page.

if you attach mousedown , mouseup ,click , touchstart etc. There is a lot of bination .
I suggest : - implement device/browser detector - then attach for mobile touch and for desktop click events

• you can use bination but use all click and just one touch variant OR all touch and one classic desktop event .

Best bination : onClick and just one mousedown or mouseup .Then implement some touch event if you have a problem with some function .

You can also put simple code like this :

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

You can find my detect browser/device script at this answer : Similar question-answer

You may download Custom Jquery Mobile Download with just Virtual Mouse (vmouse) Bindings selected.

Include this generated javascript in your code and use the code snippet.

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

The click event will now be working on desktop/mobile version on preloaded and dynamic contents with class='popmenu'