Android WebView: Very laggy button response

Question

I\'ve got a little web app that I made to play with Android\'s WebView functionality.

I\'ve got some divs that I use as buttons (with onclick attributes

Answer 1

Basically, click events on mobile browsers are delayed by 300ms. Do you know of the fast button pattern? Basically you can use the touchstart event (which fires without delay).

Here's a complete explanation: http://code.google.com/mobile/articles/fast_buttons.html

Answer 2

So, WebView holds each tap event to see if it's a double tap or a touch move event. There is an alternative to binding to touchstart events. If you specify with the viewport meta directive that your WebView shouldn't zoom or scroll, touch events will reach your code immediately (since Gingerbread).

You can find the details on the viewport directive here: http://developer.android.com/guide/webapps/targeting.html

Answer 3

try insert to the html code

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no">

and quick click click click click is no longer a problem (for me. 4.2.2 and WebChromeClient)

Answer 4

As the Google code is very complicated, I implemented my own using Mootools 1.3+:

Element.Events.touch = 
{
    base: 'touchend',
    condition: function(e) 
    {
        return  ((new Date().getTime() - this.startT < 200) && this.valid) ? true : false;
    },
    onAdd: function(fn) 
    {
        this.addEvent('touchstart', function(e)
        {
            this.valid = true;
            this.startT = new Date().getTime();
            this.startX = e.touches[0].clientX;
            this.startY = e.touches[0].clientY;
        });
        this.addEvent('touchmove', function(e)
        {
            if ((Math.abs(e.touches[0].clientX - this.startX) > 10) || (Math.abs(e.touches[0].clientY - this.startY) > 10)) this.valid = false;
        });
    }
};

Just put this code on your page and now use touch event instead of click:

$('id').addEvent('touch', function()
{
    // your code
});

It works by adding a touchend and touchstart event, if they happen in less than 200ms and the touch doesn't get too far it's a valid touch otherwise not.

It worked very well on 2.2 and 4.0