touch events not working in android phonegap webview (or even built-in browser)

Question

I was using phonegap and needed to use 'touchstart' to speed up click response, only to realize that none of 'touchstart', 'touchmove', 'touchend' is firing but 'click'.

I even tested a simple page in the built-in browser (7" android 4.0.3 tablet), and found it failed.

I tested on two tablets still the same. In the following page, button2 shows only 'html_click', button3 shows only 'click':

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">
    <title>Droid touch event test.</title>
    </head>
    <body>
    <button id="button">touch it</button>
    <button id="button2" ontouchstart="d_('html_touchstart')" onclick="d_('html_click')">html</button>
    <button id="button3">touch 3</button>
    <div id="db"></div>
    <script>
            function $(d){return document.getElementById(d)}
            function d_(m){dbo.innerHTML=dbo.innerHTML+' '+m}
            function ts1(e){d_('document touched')}
            function ts2(e){d_('button touched')}
            function eh(e){
                d_(e.type);
            }
            var ets='touchstart',dbo=$('db');
            document.addEventListener(ets,ts1,false);
            $('button').addEventListener(ets,ts2,false);
            $('button3').addEventListener(ets,eh,false);
            $('button3').addEventListener('touchend',eh,false);
            $('button3').addEventListener('click',eh,false);
    </script>
    </body>
    </html>

Why 'touchstart isn't firing? Should I do anything to make touch events work? Or is there any other way around to make click response faster?

I used mousedown event, worked but not notably fast.

(new Date()).getTime() difference (including some innerHTML change) between mousedown and click is only around 15.

I want to add a listener to 'touchstart', and it dosn't fire. What should I do to make it work? — Muhammad Ababekri, Sep 17 '12 at 04:57
i think u need to create that touch listeners on html file itself its better — Venkatesh S, Sep 17 '12 at 05:03

score 0 · Accepted Answer · answered Sep 17 '12 at 19:46

Keeping only what was necessary to show you the concept, I wrote this and tested using Phonegap Build (default to Phonegap 2.0, but shouldn't matter) on an ICS device. Should work for you:

<!DOCTYPE html>
<html>
    <body>
        <button id="button1">1</button>
        <button id="button2">2</button>

        <script>
            document.getElementById("button1").addEventListener('touchstart',button1Pressed);
            document.getElementById("button2").addEventListener('touchstart',button2Pressed);
            function button1Pressed ()
            {
                alert('Button 1 Pressed');
            }

            function button2Pressed ()
            {
                alert('Button 2 Pressed');
            }
        </script>
    </body>
</html>

Still the same. Same code working on other device with same OS didn't work, so I am now sure this is device specific problem, not the code or ICS. — Muhammad Ababekri, Oct 18 '12 at 04:41

score 0 · Answer 2 · answered Dec 24 '13 at 10:54

I also faced the same problem. On bellow first line i was getting error "Android WebView and NO_FAST_DRAW = false". After change to second line. it worked. the error was at createCustomAlert('wpt'). SO the function which I was called look like a string. This err was coming. So please check at place of function calling place

onclick = 'createCustomAlert('wpt')'

onclick = 'createCustomAlert(3)'

score -1 · Answer 3 · answered Sep 17 '12 at 05:23

-1

I also faced the same problem and messed it with almost three days. I put click events on my html input tags, (EditText) and tried, but it also didn't work. Finally, to my miracle, I just put a simple alert("Hello") to see with ontouchstart. To my surprise, I successfully got the alert and also softkeyboard, for which I was trying almost a week. You also try with this.. Best of Luck

answered Sep 17 '12 at 05:23

YuDroid

1,599
5
22
44

`` nothing. `` only 'click 6' – Muhammad Ababekri Sep 17 '12 at 05:32
Commented out all `addEventListeners`, still only `click` worked. – Muhammad Ababekri Sep 17 '12 at 05:54

touch events not working in android phonegap webview (or even built-in browser)

3 Answers3

Linked