ページ目次
event.touchesでタッチイベントを取得
って、言われたのでその通りにやってみたんですけど、取得できない!
// screenY is undefinedってなる!
$("touch").on("touchend", function(event){
var touche = event.touches[0].screenY);
~ その後の処理 ~
});
jQueryを使うと独自のイベントオブジェクトが生成される
調べてみると、jQueryを使ってイベントをバインドすると、jQuery側がブラウザの互換性解消のための独自のイベントオブジェクトを返すそうです(そんなことも知らなかった汗)。
jQueryでのタッチイベントの取得の仕方
それではどうやってjQueryを使ってTouchイベントを取得するのか。
originalEventプロパティを見る
とりあえず渡されたオブジェクトの中身をコンソールで確認してみる。
$("#touch").on("touchend", function(event){
console.log(event);
return; // ここで処理を終わらせる
// さっきの処理
var touch = event.touches[0].screenY;
});
originalEvent内のchangedTouchesに求めていたものが!
どこから取得するんだろうか。と、コンソール画面をじーっと眺める。しかし、touchesプロパティにもtargetTouchesプロパティにも何もありそうにない。
すると、originalEventにTouchEventオブジェクトがあることに気付く。そしてその中のchangedTouchesなるプロパティを覗いてみると。
ありました。これで座標を取得できます。
もちろんですが、Touchイベントに限らずjQueryを通してのイベントオブジェクトの取得はすべてoriginalEventで取得できます。
よって、先ほどのイベントのバインド処理は下記のようになります。
$("#touch").on("touchend", function(event) {
var touch = event.originalEvent.changedTouches[0].screenY;
// ~ タッチイベントの処理 ~
});
デフォルトのイベントをキャンセルする
新しくバインドしたイベントのみ取得し、既存のイベント(リンクタグなど)をキャンセルする場合は下記のどちらかを使用してデフォルトのイベントを制御するのが一般的です。
- 処理の最後に、return falseする
- preventDefaultをつかう
preventDefaultは、イベント処理内のどこで記述しても構いません。return falseについては、最後に使わないとそこで処理が終了しちゃいます。
ただ、なぜかうまく作動しないこともあった。。。
【追記】なぜかスマホのタッチイベントでpreventDefaultできないという未解決案件
“jQuery使用時はevent.touchesではなくevent.originalEventでタッチイベントを取得” への1件の返信
コメントは受け付けていません。