jQuery使用時はevent.touchesではなくevent.originalEventでタッチイベントを取得

タッチイベントの取得

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プロパティにも何もありそうにない。

touchevent-touches

すると、originalEventにTouchEventオブジェクトがあることに気付く。そしてその中のchangedTouchesなるプロパティを覗いてみると。

touchイベントのchengedTouchesプロパティ

ありました。これで座標を取得できます。

もちろんですが、Touchイベントに限らずjQueryを通してのイベントオブジェクトの取得はすべてoriginalEventで取得できます。

よって、先ほどのイベントのバインド処理は下記のようになります。

$("#touch").on("touchend", function(event) {
  var touch = event.originalEvent.changedTouches[0].screenY;
  // ~ タッチイベントの処理 ~
});

デフォルトのイベントをキャンセルする

新しくバインドしたイベントのみ取得し、既存のイベント(リンクタグなど)をキャンセルする場合は下記のどちらかを使用してデフォルトのイベントを制御するのが一般的です。

  • 処理の最後に、return falseする
  • preventDefaultをつかう

preventDefaultは、イベント処理内のどこで記述しても構いません。return falseについては、最後に使わないとそこで処理が終了しちゃいます。

ただ、なぜかうまく作動しないこともあった。。。

【追記】なぜかスマホのタッチイベントでpreventDefaultできないという未解決案件

(Visited 9,937 times, 1 visits today)

“jQuery使用時はevent.touchesではなくevent.originalEventでタッチイベントを取得” への1件の返信

コメントは受け付けていません。