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 コード

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 コード

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

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

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

 (1)touchstart
　(2)mouseover
　(3)mousemove(一次)
　(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 中国語 Web サイトの他の関連記事を参照してください。