Avoid 300ms click delay on input element which trigger keyboard appearing on IOS

Question

Currently I'm working on web app(jQueryMobile on Backbone.js) for both Android and IOS. And for the performance,I'm trying to remove 300ms click delay on those devices.

For those who don't know what the 300ms delay is, Here is really good article explaining it.

http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

For Android devices, It's truly easy to erase it.

<meta name="viewport" content="width=device-width, user-scalable=no">

meta code above do the trick.once chrome recognizes user zoom in/out is unavailable in the page,300ms delay would be disappeared.

But the case of IOS safari,There is no support to disable it.

so I've already tried some plugins creating "no delay click event" based on touchstart - touchend event and touched position. and I picked 'vclick' event which is jQueryMobile's original Event of no delay click.

It works perfectly except one situation that event handler changes DOM elements and somehow input comes up at the point I clicked,OS keyboard also showing up.

that's because keyboard appearing is based on "normal" click event which comes with 300ms delay after no delay click event.and Since I move elements on no delay click event,at the time "normal" click event occurs,original clicked element isn't there but input elements.

my question is how can I remove 300ms delay on keyboard appearing event?

simple reproducible code is here

http://jsfiddle.net/Suish/gypbn304/1/

any suggestion or help will be appreciated.

Answer 1

https://github.com/ftlabs/fastclick

fastclick.js

window.addEventListener('load', function() {
    var fastClick = new FastClick(document.body);
}, false);