ネイティブアプリのような超軽快ボタンをWebで実現してみた - ITコンサルタント成長録

iOSやAndroidのモバイルアプリをWebアプリで作り始めて自分が我慢ならなかったのが「ボタン」だ。Aタグを使っても、clickイベントをバインドしても、反応が遅い、トロいボタンになってしまう。ネイティブにはやはり勝てないのか。クイックなボタンはWebで作れないのか…ダメ元で試行錯誤した結果、、、 ネイティブアプリのボタンと見間違うほど機敏なボタンが出来上がった！ Webでもここまで動くのか！と感動してしまった。 ルック＆フィール 見ての通り。「タップ」を押すと１ずつカウントアップする。「リセット」を押すと０に戻る。 「タップ」ボタンを押した時の感じがとても気持ちいいのでぜひ試してほしい。二本指でトリルのように超高速でタップしても完全に追随するのは驚愕だ。早押しゲームのような耐えうるレスポンスだろう。なお、このアプリはタッチデバイス（スマホ、タブレット）でしか動作しない。動作検証した端

[edajima]

普通のa要素やonclickイベントだとダブルクリックの判定待ちで300msecの遅延

[shinki0121]

Googleによれば、モバイルブラウザではclickイベント時には約300msの待ち時間が発生する。 なぜなら、300ms以内にもう一度タップされればダブルタップと認識しないといけないからだ。