HTML5の実戦とタッチイベント解析（touchstart、touchmove、touchend）

HTML5 では多くの新しいイベントが追加されていますが、互換性の問題があまり理想的ではなく、実用性があまり高くないため、ここでは基本的に、優れたアプリケーションと広く互換性のあるイベントのみを共有します。今後、互換性の状況が改善され次第、見直してください。今回紹介するイベントは主にタッチイベント、touchstart、touchmove、touchendです。

最初のタッチイベント touchstart、touchmove、touchend は、開発者に情報を伝えるために iOS の Safari ブラウザーに新しく追加されたイベントです。 iOS デバイスにはマウスもキーボードもないため、モバイル Safari ブラウザ用のインタラクティブな Web ページを開発する場合、PC 側のマウスとキーボードのイベントだけでは十分ではありません。

iPhone 3G がリリースされたとき、独自のモバイル Safari ブラウザはタッチ操作に関連するいくつかの新しいイベントを提供しました。その後、Android 上のブラウザーにも同じイベントが実装されました。タッチ イベント (タッチ) は、ユーザーが画面上に指を置く、画面上をスライドする、または画面から離れると発生します。具体的な手順は以下のとおりです:

Touchstart イベント: すでに画面上に指がある場合でも、指が画面に触れるとトリガーされます。
touchmove イベント: 指が画面上をスライドすると継続的にトリガーされます。このイベント中に、preventDefault() イベントを呼び出すと、スクロールを防ぐことができます。
touchend イベント: 指が画面から離れるとトリガーされます。
touchcancel イベント: システムがタッチの追跡を停止するとトリガーされます。このイベントの正確な出発時間については、文書に具体的な説明がないため、推測するしかありません。

上記のイベントはすべてバブルアップするため、キャンセルすることができます。これらのタッチ イベントは DOM 仕様では定義されていませんが、DOM 互換の方法で実装されています。したがって、各タッチ イベントのイベント オブジェクトは、マウスの実践において共通の属性を提供します。バブル (バブル イベントのタイプ)、キャンセル可能 (イベントに関連付けられたデフォルト アクションをキャンセルするために、preventDefault() メソッドを使用できるかどうか)、clientX (戻り値イベントがトリガーされたとき、マウス ポインターの水平座標)、clientY (イベントがトリガーされたときのマウス ポインターの垂直座標を返す)、screenX (イベントがトリガーされたとき、マウス ポインターの水平座標)、および screenY (イベントがトリガーされたときに返されます) イベントがトリガーされたときのマウス ポインターの垂直座標)。共通の DOM プロパティに加えて、タッチ イベントには、タッチを追跡するための次の 3 つのプロパティも含まれています。

touches: 現在追跡されているタッチ操作を表すタッチオブジェクトの配列。
targetTouches: イベントターゲットに固有の Touch オブジェクトの配列。
changeTouches: 最後のタッチ以降に何が変更されたかを示す Touch オブジェクトの配列。

各Touchオブジェクトに含まれるプロパティは以下の通りです。

clientX: ビューポート内のタッチターゲットのx座標。
clientY: ビューポート内のタッチターゲットのy座標。
識別子：タッチを識別する一意のID。
pageX: ページ内のタッチ対象のx座標。
pageY: ページ上のタッチ対象のy座標。
ScreenX: 画面上のタッチターゲットのx座標。
ScreenY: 画面上のタッチターゲットのy座標。
ターゲット: DOM ノードターゲットを攻撃します。

上記の属性を見ると、実際の各属性が非常に詳細に説明されているため、いくつかの実際の例を使用することによってのみ、その謎をより深く理解することができます。小さな例は次のとおりです。

JavaScript code

function load (){
 
    document.addEventListener('touchstart',touch,false);
    document.addEventListener('touchmove',touch,false);
    document.addEventListener('touchend',touch,false);
     
    function touch (event){
        var event = event || window.event;
         
        var oInp = document.getElementById("inp");
 
        switch(event.type){
            case "touchstart":
                oInp.innerHTML ="Touch started (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                break;
            case "touchend":
                oInp.innerHTML ="<br>Touch end (" + event.changedTouches[0].clientX +"," + event.changedTouches[0].clientY +")";
                break;
            case "touchmove":
                event.preventDefault();
                oInp.innerHTML ="<br>Touch moved (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                break;
        }
         
    }
}
window.addEventListener(&#39;load&#39;,load,false);

HTML code

<div id="inp"></div>

上記の小さな例。 touchstart イベントがトリガーされると、タッチ位置が div タグに更新されます。 touchmoveイベントが発生すると、デフォルト動作はスクロール（タッチ移動のデフォルト動作はページのスクロール）となり、タッチ操作の変更情報がdivタグに更新されます。 touchend イベントは、タッチ操作に関する最終情報を出力します。 touchend イベントがトリガーされると、アクティブなタッチ操作がないため、touches コレクションには Touch オブジェクトが存在しないことに注意してください。

これらのイベントはドキュメントのすべての要素でトリガーされるため、ページのさまざまな部分を個別に操作できます。画面上の要素をタッチすると、これらのイベント (マウス イベントを含む) が次の順序で発生します:

(1)touchstart
(2)mouseover
(3)mousemove(1 回)
(4)mousedown
(5)mouseup
( 6) click
(7) touchend

ここまで紹介しましたが、これらのタッチイベント (touchstart、touchmove、touchend) をサポートするブラウザは、iOS 版 Safari、Android 版 WebKit、bada 版です。 Dolfin、OS6 以降の BlackBerry WebKit、Opera Mobile 10.1 以降、および LG 独自の OS の Phantom ブラウザ。現在、iOS バージョンの Safari のみがマルチタッチをサポートしています。 Firefox 6 以降および PC 用 Chrome もタッチ イベントをサポートします。

HTML5の実戦とタッチイベント（touchstart、touchmove、touchend）の解析を紹介します 今日はブラウザでよくサポートされているタッチイベントを中心に紹介します。ご参考になれば幸いです、PHP中国語サイトを応援していただければ幸いです。

HTML5 の実戦とタッチ イベント (touchstart、touchmove、touchend) の分析関連記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。