CODEWITHSUNDEEP
javascriptjquery
Kokodoko
Kokodoko

Reputation: 28158

jquery touchstart delay, much more than mousedown?

I am building a simple game using DOM elements. I need a div (containing an image) to move as soon as the user taps on the screen. Using mousedown works perfectly, but touchstart has a very noticable delay - making it unusable for a quick reaction game.

How can I reduce this delay?

My code:

_myScreen.on('touchstart mousedown', function(){screenClicked();});


function screenClicked(e) {
    var y = e.offsetY;
    model.css({top:y});
}

Upvotes: 0

Views: 1086

Answers (1)

Miroslav Popovic
Miroslav Popovic

Reputation: 12128

There is a 300ms delay on touch devices. Here's a blog post from TJ VanToll of Icenium team explaining the history of this behavior and potential solutions for it.

An excerpt from the post:

While browsers have come up with some interesting solutions to the 300ms click delay, there is simply no solution that works everywhere. However, there are plenty of smart people that have thought about this problem and have come up with JavaScript based solutions for all platforms. These solutions can be categorized into two camps - polyfills for the pointer events model and "fast click" solutions.

Let's look at some pointer event polyfills first. Pointer Event Polyfills

There a several polyfills out there for pointer events. Here are the more popular ones.

Polymer from Google
HandJS from Microsoft
Points by @Rich-Harris

...

FastClick is a small library developed by FT Labs that specifically aims to prevent the 300ms click delay in mobile browsers.

Upvotes: 1

Related Questions