タッチイベント

多くのモバイルデバイスで動作するタッチ対応アプリを作成することが可能です。タッチ対応のデスクトップブラウザも間もなく登場します。今から準備を始めましょう。

初めて iOS 2.0 の mobile Safari に登場しました。

4 つの基本イベント：

• touchstart
• touchmove
• touchend
• touchcancel

イベントオブジェクトのフィールド：

• touches
• targetTouches
• changedTouches
• 修飾キー（shift、alt、ctrl、meta）

タッチオブジェクトのフィールド：

• identifier
• clientX/Y
• pageX/Y
• screenX/Y

現在は W3C 作業草案となっていますが、ベンダー間には依然として多くの違いが存在します：

関連: Unity Asset Store — Unity プロジェクトに直接ドロップできる既製のアート、ツール、テンプレート.

• touchenter / touchleave（Firefox、Blackberry）
• gesturestart / gesturechange / gestureend（mobile Safari）
• MSPointer* / MSGesture*（IE10）

ネイティブのような動作

代替入力方法を持つデバイスにおけるマルチタッチ対応：

• FF6+ は W3C スタイルのタッチイベントをサポート
• IE10 は MSPointer* / MSGesture* をサポート
• WebKit ではまだサポートされていません

標準的なジェスチャ処理（パン／ズーム／スクロール）を無効化するには：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

および

私たちの選択: Udemy Game Development Courses — Unity、Unreal、C++、C#、シェーダー プログラミングをカバーするオンデマンド コース.

document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false);

標準的なジェスチャ処理（パン／ズーム／スクロール）を無効化し、ループ内でレンダリングを処理します：

var touches = [], // ここでは requestAnimationFrame() も使用可能です
    renderLoop = setInterval(function() {
      draw(touches); // 描画関数を呼び出します
    }, 15);

myElement.addEventListener('touchmove', function(e) {
  touches = e.touches;
}, false);

標準的なジェスチャ処理（パン／ズーム／スクロール）を無効化し、ループ内でレンダリングを処理します。シングルタッチデバイス（例：Android スマートフォン）にも対応させます。

標準的なジェスチャ処理（パン／ズーム／スクロール）を無効化し、ループ内でレンダリングを処理します。シングルタッチデバイス（例：Android スマートフォン）に対応させ、さらに以下のためのマウスイベントも処理します：

• 物理ポインタハードウェアを搭載したスマートフォン（例：多くの Android 端末）
• タッチイベントを持たないスマートフォン（例：Windows Phone 7）
• タッチサポートのないデスクトップブラウザ（例：Chrome）

標準的なジェスチャ処理（パン／ズーム／スクロール）を無効化し、ループ内でレンダリングを処理します。シングルタッチデバイス（例：Android スマートフォン）に対応させ、マウスイベントを処理し、タッチ対応デスクトップブラウザもサポートします：

• Firefox（W3C スタイルのタッチイベント）
• IE10（MSPointer*）

@ @ggoodale