HTML5 タッチイベント

この記事では、HTML5 での実際の戦闘とタッチ イベントの分析について詳しく説明します。必要な方は参照してください。

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座標。
target: 目を引く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

<p id="inp"></p>

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

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

(1)touchstart
(2)mouseover
(3)mousemove(once)
(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 もタッチ イベントをサポートします。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

以上がHTML5 タッチイベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。