JavaScriptタッチとジェスチャーイベント

iOS版Safariは開発者に特別な情報を伝えるため、いくつかの特別イベントを追加しました.iOSデバイスはマウスもキーボードもないので、Safariを移動させるためにインタラクティブページを開発するときには、通常のマウスやキーボードイベントは全く役に立ちません.Android中のWebKitが加入するにつれて、多くのこのような特有の事件が事実基準になりました.
1.タッチイベント
iOS 2.0のソフトを含むiPhone 3 Gのリリースには、Safariブラウザの新バージョンも含まれています.この新しい移動Safariはタッチ操作に関する新しいイベントを提供します.その後、Androidのブラウザでも同じイベントが実現した.タッチイベントは、ユーザの指をスクリーンの上に置くと、画面をスライドさせたり、画面を移動させたりするときにトリガされます.具体的には、以下のようなタッチイベントがあります.
タッチパネルを指でタッチするとトリガします.もう一つの指がスクリーンに置いても触発されます.touchmove:指をスクリーンにスライドさせると、連続的にトリガします.このイベントが発生している間、preventDefault()を呼び出してローリングを阻止することができます.タッチパッド:スクリーンから指を離すとトリガします.touchcancel:システムがトレースタッチを停止した時にトリガします.このイベントの適切なトリガについては、文書では明確に説明されていません.上のこれらの事件はいずれも泡が発生します.キャンセルしてもいいです.これらのタッチイベントはDOM仕様では定義されていないが、DOM対応で実現されている.したがって、各タッチイベントはDOM仕様では定義されていないが、DOM対応で実現されている.したがって、各タッチイベントのイベントオブジェクトは、マウスイベントでよく見られる属性を提供しています.
一般的なDOM属性に加えて、タッチイベントには以下の3つのタッチを追跡するための属性が含まれています.
touches:現在トレースされているタッチ操作のTouchオブジェクトの配列を表します.ターゲットタッチ:イベントターゲットのタッチオブジェクトに特定される配列.changeTouches:前回のタッチ以来、何かが変わったTouchオブジェクトの配列を表します.各タッチオブジェクトには以下の属性が含まれます.
clientX:タッチターゲットのX座標.clientY:タッチターゲットのY座標.identifer:タッチの一意IDを表します.PageX:タッチターゲットのページのx座標です.PageY:タッチターゲットのページのy座標です.スクリーンのx座標をタッチします.スクリーンのy座標にタッチします.target:タッチしたDOMノード座標.これらの属性を使って、ユーザの画面タッチ操作を追跡することができます.次の例を見ます.

function handleTouchEvent(event) {
    //       
    if (event.touches.length == 1) {
        var output = document.getElementById("output");
        switch (event.type) {
            case "touchstart":
                output.innerHTML = "Touch started (" + 
                event.touches[0].clientX + "," + 
                event.touches[0].clientY + ")";
                break;
            case "touchend":
                output.innerHTML += "<br>Touch ended (" + 
                event.changedTouches[0].clientX + "," + 
                event.changeTouches[0].clientY + ")";
                break;
            case "touchmove":
                event.preventDefault(); //    
                output.innerHTML += "<br>Touch moved (" + 
                event.changedTouches[0].clientX + "," + 
                event.changedTouches[0].clientY + ")";
                break;
        }
    }
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);

以上のコードは画面上で発生したタッチ操作を追跡します.簡単にするために、アクティブなタッチ操作がある場合にのみ情報を出力します.touch start事件が発生した時.タッチした位置情報を出力します.
元素の中.touchmoveイベントが発生すると、デフォルトの動作はキャンセルされ、スクロールを停止し(タッチ移動のデフォルトはスクロールページ)、タッチ操作の変化情報を出力します.タッチ操作に関する最終情報はtouchedイベントから出力されます.タッチ操作がないので、touchedイベントが発生した時にタッチパネルのセットにはタッチ操作がないことに注意してください.その時は、代わりにchange Touchsを使って集合しなければなりません.
これらのイベントは、ドキュメントのすべての要素の上でトリガされますので、それぞれのページの異なる部分を操作できます.画面の要素に触れると、これらのイベントの数序は以下の通りです.
touch start mouseover mousemiove mousedown mouseup click touchend タッチイベント対応のブラウザは、iOS版Safari、Android版WebKit、ベータ版Dolfin、OS 6＋のBlackBerry WebKit、Opera Mobile 10.1、LG専用OS内のphantomブラウザを含む.現在はIOS版Safariだけがマルチタッチをサポートしています.デスクトップ版Firefox 6+とChromeもタッチイベントをサポートします.
2.ジェスチャーイベント
IOS 2.0のSafariはジェスチャーイベントを導入した.二つの指がスクリーンに触れるとジェスチャーが生まれ、ジェスチャーは表示項目の大きさを変えたり、表示項目を回転したりします.三つのジェスチャーイベントがあります.それぞれ次のようにします.
gesturstart:指がスクリーンの上でもう一つの指を押してタッチスクリーンがある時にトリガします.gesturechange:タッチスクリーンのいずれかの指の位置が変化したときにトリガします.gesturend:任意の指がスクリーンの上から離れる時にトリガします.二つの指がイベントの受信容器に触れた時だけ、これらのイベントが発生します.イベントハンドラを1つの要素に設定すると、2つの指が同時に要素の範囲内にある必要があり、ジェスチャーイベントをトリガすることができるということです.これらのイベントは泡が発生しますので、ドキュメントにイベントハンドラを置いてジェスチャーイベントをすべて処理することもできます.このとき、事件の目的は、両指がその範囲内にある元素です.
タッチイベントとジェスチャーイベントの間には何らかの関係があります.指をスクリーンに置くと、タッチポイントイベントが発生します.もう一つの指をスクリーンに置くと、まずgesturturtイベントが発生します.もう一つの指がスクリーンに置かれると、先にgesturestartイベントが発生し、その後、指によるtouchstartイベントが発生します.一つまたは二つの指がスクリーンを滑ると、gesturechangeイベントが発生しますが、一つの指が離れるとgesturendイベントが発生し、続いて指によるtouchendイベントが発生します.
タッチイベントと同様に、各ジェスチャーイベントのイベントオブジェクトには標準的なマウスイベント属性が含まれています.さらに、2つの追加的な属性:rotationとscaleを含む.ここで、rotation属性は指の変化による回転角度を表し、負の値は反時計回りの回転を表し、正の値は時計回りの回転を表します.scale属性は、2つの指の間隔の変化を表している(例えば、内へ収縮すると距離が短くなる).この値は1から始まり、距離が大きくなるにつれて増加し、距離が縮むにつれて減少する.
以下はジェスチャーイベントを使用する例である.

function handleGestureEvent(event) {
    var output = document.getElementById("output");
    switch(event.type) {
        case "gesturestart":
            output.innerHTML = "Gesture started (rotation=" + 
            event.ratation +",scale=" + event.scale + ")";
            break;
        case "gestureend":
            output.innerHTML += "<br>Gesture ended (rotation+" + event.rotation + ",scale=" + event.scale + ")";
            break;
        case "gesturechange":
            output.innerHTML += "<br>Gesture changed (rotation+=" + event.rotation + ",scale+" + event.scale + ")";
            break;
    }
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);

ここでのコードは、タッチイベントの例と同様に、各イベントを同じ関数に関連付けるだけで、各イベントの関連情報を関数を通して出力します.
ps:
タッチイベントはrotationとscale属性を返しますが、この2つの属性は2つの指とスクリーンが接触している時だけ変化します.一般的には、2つの指に基づくジェスチャーイベントを使用することは、タッチイベントのすべてのインタラクションを管理するよりも容易である.