【jQuery】スマートフォンでのタッチイベントについて

村上 著者:村上

【jQuery】スマートフォンでのタッチイベントについて

本日の記事は、何だか久しぶりな気がするjQueryについての技術ネタ!

スマートフォンサイトで、地図とマップピンを表示させることがあったのですが、その際に、「ドラッグではピンの位置はそのままで、地図をタップした時のみマップピンを移動させる」という処理をさせたい、ということがありました。
上記のように、ドラッグとタップで処理を変えるときなどに、タッチイベントを活用したので、自分の覚え書きとしてまとめます。

タッチイベントの種類は下記の通り。

  • touchstart
  • touchend
  • touchmove

他にも、touchcancel というのがあるらしいですが、なかなか使う機会が分からなかったので、今回は割愛します。

 

まずは、それぞれのイベントについて簡単にまとめ。
最初は、touchstart について。
こちらは、タッチされたときに実行されるイベントです。

$("#main").on('touchstart', function(){
    // 画面がタッチされた時に実行したい処理
});

id に main が指定された要素に対して touchstart イベントを指定しているので、main がタッチされた瞬間に発火します。
こちらは click とほぼ同じイメージで動作するので、分かりやすく使いやすいです。

次は、touchend について。
こちらは 画面から指が離れたタイミングで発火します。

$("#main").on('touchend', function(){
    // 画面をタップして指が離れた時に実行したい処理
});

ただし、touchend では、event.changedTouches[0].pageX や event.changedTouches[0].pageY で、X座標・Y座標の位置を取得できないので注意が必要とのこと。
私は 地図の表示に Mapbox を利用しているので、問題なかったのですが、jQueryでX座標・Y座標を取得したい場合は、touchstart を使うか、touchmove を併用して変数に格納するのが良いとのこと。
このあたりはお好みで使い分けてもいいと思います。

最後は、touchmove について。

$("#main").on('touchmove', function(){
    // 画面がドラッグしている時に実行したい処理
});

こちらはドラッグをしている間に呼ばれるイベントです。
繰り返し呼ばれるので、座標の位置情報を変数に格納するなど、簡単な処理を書くだけにとどめたほうが良いとのこと。
また、指を移動させないと、touchmove が発火しないことがあるとのことでしたので、このあたりも注意したほうがよさそうです。

 

で、最後に私が実際に書いたコードがこちら。

var isDrag = false;  // ドラッグ中かの判定
// マップがドラッグされたときに実行される<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
$("#map").on('touchmove', function (e) {
    if(!isDrag){
        // ドラッグ中なので、値を true に変更
        isDrag = true;
    }
});
// マップをタップし指を離したときに実行される
$("#map").on('touchend', function (e) {
    if(!isDrag){
        // 画面から指を離した際に実行したい処理
        // 例:マップピンを移動する など
    }
    isDrag = false;
});

もしかしたらもっといい方法があるのかもしれませんが…意図していた通り、「ドラッグ中は地図のドラッグだけを行い、タップした時のみマップピンが移動する」という処理ができたので、これでOKということにします。

 

touchstart、touchend、touchmove の3つをご紹介しましたが、単なるタッチイベントなら、一番最初の touchstart だけ覚えておけば正直問題なさそうな気もしますね。

  • この記事いいね! (0)

著者について

村上

村上 administrator