本日の記事は、何だか久しぶりな気がするjQueryについての技術ネタ！
スマートフォンサイトで、地図とマップピンを表示させることがあったのですが、その際に、「ドラッグではピンの位置はそのままで、地図をタップした時のみマップピンを移動させる」という処理をさせたい、ということがありました。
上記のように、ドラッグとタップで処理を変えるときなどに、タッチイベントを活用したので、自分の覚え書きとしてまとめます。
タッチイベントの種類は下記の通り。
- touchstart
- touchend
- touchmove
他にも、touchcancel というのがあるらしいですが、なかなか使う機会が分からなかったので、今回は割愛します。
まずは、それぞれのイベントについて簡単にまとめ。
最初は、touchstart について。
こちらは、タッチされたときに実行されるイベントです。
1 2 3 | $("#main").on('touchstart', function(){ // 画面がタッチされた時に実行したい処理}); |
id に main が指定された要素に対して touchstart イベントを指定しているので、main がタッチされた瞬間に発火します。
こちらは click とほぼ同じイメージで動作するので、分かりやすく使いやすいです。
次は、touchend について。
こちらは 画面から指が離れたタイミングで発火します。
1 2 3 | $("#main").on('touchend', function(){ // 画面をタップして指が離れた時に実行したい処理}); |
ただし、touchend では、event.changedTouches[0].pageX や event.changedTouches[0].pageY で、X座標・Y座標の位置を取得できないので注意が必要とのこと。
私は 地図の表示に Mapbox を利用しているので、問題なかったのですが、jQueryでX座標・Y座標を取得したい場合は、touchstart を使うか、touchmove を併用して変数に格納するのが良いとのこと。
このあたりはお好みで使い分けてもいいと思います。
最後は、touchmove について。
1 2 3 | $("#main").on('touchmove', function(){ // 画面がドラッグしている時に実行したい処理}); |
こちらはドラッグをしている間に呼ばれるイベントです。
繰り返し呼ばれるので、座標の位置情報を変数に格納するなど、簡単な処理を書くだけにとどめたほうが良いとのこと。
また、指を移動させないと、touchmove が発火しないことがあるとのことでしたので、このあたりも注意したほうがよさそうです。
で、最後に私が実際に書いたコードがこちら。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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 だけ覚えておけば正直問題なさそうな気もしますね。
