スマートフォンなどのモバイルサイトを作成するときには専用のイベントが必要になります。
今回はタップ、スワイプのイベントに対応する方法を解説します。
タップイベント
タップとは、画面を指先で短く1回叩くことをさします。通常はPC用ページのクリックイベントでもタップに対応していますが、少し挙動がおかしかったりレスポンスが悪かったりすることがあります。
次のサンプルは通常のclickイベントです。サンプルをPCとスマホで確認して挙動を確認してください。
$('.button').on('click',function(){
$('.result').text('touchした！');
})
clickイベントでも特に問題なく動いていることが確認できます。
では、次にスマホ用のイベント「touchstart」を使用したサンプルを確認してみましょう。
$('.button').on('touchstart',function(){
$('.result').text('touchした！');
})
touchstartサンプルはスマホのタップには対応していますが、PCのマウスクリックには対応していません。
次のサンプルはタップが使えるデバイスかどうかを判定して、もしそうなら「touchstart」イベントを使い、そうでなければ「click」イベントを使用する仕組みのものです。
「touchstart」 と 「click」を判定して使うサンプル
var _touch = ('ontouchstart' in document) ? 'touchstart' : 'click';
$('.button').on(_touch,function(){
$('.result').text('touchした！');
})
ここでは三項演算子を使用して「touchstart」 と 「click」を使い分けています。
スワイプの仕組み
スワイプとは、画面を指で押しながら、一定方向へ掃くように動かすことです。
スワイプにあたるイベントはありませんので少し組み立てを行う必要があります。
スワイプのイベントは「touchstart」と「touchmove」そして「touchend」の３つのイベントを合わせて用います。
「touchstart」で最初に画面にタッチした時の座標を取り、次に「touchmove」で指の移動距離を取ります。そして「touchend」で指が離れた時をスワイプの終了と判定してイベントに対する命令文を記述します。
具体的なサンプルは以下の通りです。
$(‘.button’).on(‘touchstart’,function(){
event.preventDefault();
$(this).data(‘startX’,event.touches[0].pageX)
.data(‘startY’,event.touches[0].pageY).data(‘moveX’,0).data(‘moveY’,0);
}).on(‘touchmove’,function(){
$(this)
.data(‘moveX’,event.touches[0].pageX-$(this).data(‘startX’))
.data(‘moveY’,event.touches[0].pageY-$(this).data(‘startY’));
}).on(‘touchend’,function(){
if($(this).data(‘moveX’)>10){
$(‘.result’).text(‘右スワイプした’);
}else if($(this).data(‘moveX’)<-10){
$('.result').text('左スワイプした');
}else if($(this).data('moveY')>-10 && $(this).data(‘moveY’)<10 ){
$('.result').text('タップした');
}else{
$('.result').text('妙な動作をした');
}
})
[/js]
data()を使用して「touchstart」座標と「touchmove」で取得した移動距離を保存しているところがポイントです。
data()の使い方は「data-**属性とdata()の使い方〜jQuery」を参考にしてください。
event.preventDefault()はイベントオブジェクトです。イベントオブジェクトはイベントハンドラの第1引数に自動でセットされるオブジェクトです。これは、デフォルトのアクションを停止する働きがあります。例えばaタグのリンクの遷移やスクロールなどです。
スワイプの判定は水平方向に10px移動したら右スワイプ、水平方向に-10px移動したら左スワイプ、垂直方向の移動が10px以内ならタップでそれ以外は対象外としています。
それぞれの数値を変更したい場合はif文の条件中の数値を変更します。またそれぞれのif文内の命令文を書き換えるとスワイプに応じて命令することができます。
