タブレットやスマホ限定なら tapイベントが最高!

構築・開発

iPadでの診断コンテンツを作っている時に、ボタンをタップしたら選択されているようにクラスを付ける処理を作っていました。

$('li').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
    return false;
});

最初 clickイベントで実装していたんですが、ワンテンポ遅れたように反応が悪く使いづらいものでした。

参考:うのらぼ。 – 【JS】iPhoneでタップの反応が遅いと感じたら
clickイベントは、300ms程度のディレイが設定されている??

なので、touchstartやtouchendイベントに切り替えて試したところ、反応速度は体感で早くなりました。
が、一点問題があり、touchmoveでイベントキャンセルが出来ずに触ると必ず選択されてしまう状態となりました。

touchstartのposition位置取得して置いて、touchendの時に位置比較してキャンセルイベント作ろうかと思ったりしたのですが、めんどくさい。

 

もっといい方法はないかとググっていたところ、ビンゴの記事が見つかりました。

スマホWebアプリ作るなら’click’より’tap’使おうよ! – モロ屋

jQuery mobile内に実装されている tap というイベントを使うというもの。

jQuery mobile は、今まで使わない機能が多すぎて、実装するとメンドイという印象しかなかったけど、必要な機能だけを取り出して使う分には、かなり効率的だと感じました。

上記参考サイトは、3年前ということでソースへのリンクが切れていました。
デモページにあるソースを持ってこようとしましたがjQueryバージョン(3.1.0)が異なるため動きませんでした。

そこで、githubから必要な部分のソースだけを入れたところ、無事解決しました。

使用jQueryバージョンは、3.1.0。
読み込んだソースは、下記2つ。
https://github.com/jquery/jquery-mobile/blob/master/js/vmouse.js
https://github.com/jquery/jquery-mobile/blob/1.3.1/js/events/touch.js
touch.jsは、最新のものだとエラーとなったので、過去バージョンのものを使用しました。

コメント

スポンサーリンク
タイトルとURLをコピーしました