How to implement onclick in javascript and html for devices with lower versions of android?

Question

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.

DaveAlden · Accepted Answer · 2013-06-12T17:31:23.120

4

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

edited Jun 12 '13 at 17:31

answered Jun 12 '13 at 10:02

DaveAlden

30,083
11
93
155

Thank You,for the reply. desperately waiting for one. I am working with cordova 2.1.0 as my sqlite plugin supports that version.I have completed the entire project in the fag end of the testing phase,when I found this ISSUE. anyways, I shall test it and let you know the results. – user Jun 12 '13 at 10:08
Really annoying to find bugs like these during the final phases of a project - I can sympathise. If this test project works OK on your devices, try swapping in Cordova 2.1.0 in place of 2.8.0 and see if that still works. – DaveAlden Jun 12 '13 at 10:28
I need your help,its working with cordova 2.8.0 and surprisingly even with cordova 2.1.0 – user Jun 12 '13 at 11:08
It sounds likely it's something else in your code causing the problem. When you run your app on an Android device using Eclipse, are there any errors in the LogCat window when you try clicking? – DaveAlden Jun 12 '13 at 11:47
Sir,now i have removed all the data and trying to run with just the html,images and css **without javascript for the values rather the data** ...I am observing something very weird....What ever image i put to the top of the screen..i can say for the top 44px of the device the onclick is not functioning. I am unable to find the cause for this – user Jun 12 '13 at 12:24
Without seeing your code it's hard to know exactly what's happening. It's possible another HTML element is overlaid above the image and is "stealing" the click event. I'd suggest running your app in the phonegap emulator on a desktop browser then use firebug or some other DOM inspector to right-click on the problematic area and inspect the DOM to see what element is receiving click events. – DaveAlden Jun 12 '13 at 12:41
Sir, can you find the code http://jsfiddle.net/cfhEm/ the image on the header is not working – user Jun 12 '13 at 12:52
Sir, when you told me to check the code...I was checking line by line and executing...the problem was with this code ``...once i removed this `onload="loaded()` everything started functioning... but I dont have the same html for the other pages...need to decode the error in those pages too.. – user Jun 13 '13 at 05:23
1

Your fiddle contains `` not `` so the fiddle is not the same as your code. Your should be using the [deviceready](http://docs.phonegap.com/en/2.8.0/cordova_events_events.md.html#deviceready) event with Phonegap apps, not load events. I also suggest you use [jQuery](http://jquery.com) for your event handling so you can move addition of the event listeners out the of HTML and back into the JS – DaveAlden Jun 13 '13 at 08:38
Almost decoded all the pages...working now ..thank you...still i need to decode for some and find errors..Sir, you had commented on my iscroll question pointing out an error.. can you help me out [here](http://stackoverflow.com/questions/16980231/how-to-use-iscroll-javascript-in-phone-gap/16986964#comment24603914_16986964)..My current problem is in the last comment...please – user Jun 13 '13 at 08:58
Sir,one of the problems for this onclick not functioning was my scroll view...So,i have changed my scrolling position...Initially I had kept this scroll position as soon as the page starts....now I have kept it beneath all my images in that page...My onclick is working smoothly....But is this the solution?? or can I manage it with having my scroll right from the top of my page...?? – user Jun 13 '13 at 11:12
thank you sir for helping me out with both onclick functionality and the length of the scroll view using `myScroll.refresh();` it worked..thank you. – user Jun 14 '13 at 06:04
Sir, the reason for my **onclick** not functioning was i had declared the iscroll onloaded and in the other pages used this `function onStart ( touchEvent ) { if( navigator.userAgent.match(/Android/i) ) { touchEvent.preventDefault(); } }` on deviceready but if have this on deviceready... **onclick** does not function..now i where should i have this function for my swipr view? Please,suggest – user Jun 14 '13 at 09:03
How are you adding the deviceready listener? You'll need to add the event listener programatically using Javascript, not using an HTML attribute: This won't work: `` but, using jQuery, this will: `$(document).on("deviceready", myfunction);` – DaveAlden Jun 14 '13 at 10:16
Sir, please find the edit version of my question...this is how i have used it. – user Jun 14 '13 at 10:22

score 1 · Answer 2 · edited May 23 '17 at 11:48

You cant use all events on page.

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

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

Best combination : 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

score 0 · Answer 3 · answered Oct 21 '15 at 14:33

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'

How to implement onclick in javascript and html for devices with lower versions of android?

3 Answers3

Linked