本日の記事は、何だか久しぶりな気がする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 だけ覚えておけば正直問題なさそうな気もしますね。
