この記事では、主にHTML5モバイルターミナルによって開発された一般的なタッチイベントの編集を紹介します。タッチイベントのイベントオブジェクトは、基本的にマウス操作の属性に対応しています。それを必要とする友達はそれを参照できます。
多くの新しいイベントがHTML5に追加されましたが、互換性の問題は理想的ではなく、アプリケーションがあまり実用的ではないため、基本的にここでは省略されています。イベントを幅広いアプリケーションと互換性の高い互換性と共有しています。互換性の状況が将来改善するにつれて、それらを次々に追加して共有します。今日あなたに紹介するイベントは、主にTouchStart、TouchMove、Touchendです。
最初は、Touch Events TouchStart、TouchMove、TouchEndは、SafariブラウザのiOSバージョンの新しく追加されたイベントで、開発者に情報を伝えるためのイベントです。 iOSデバイスにはマウスもキーボードも含まれていないため、Mobile Safariブラウザー用のインタラクティブなWebページを開発するときは、PCのマウスイベントやキーボードイベントでは十分ではありません。
iPhone 3GSがリリースされたとき、独自のモバイルSafariブラウザーは、タッチ操作に関連するいくつかの新しいイベントを提供しました。同じイベントがAndroidのブラウザによって実装されました。タッチイベントは、ユーザーが画面に指を置いたり、画面にスライドしたり、画面から離れるときに開始されます。次の詳細について説明します。
TouchStartイベント:指が画面に触れるとトリガーされ、1本の指が既に画面に配置されていてもトリガーがトリガーされます。
TouchMoveイベント:フィンガーが画面上でスライドすると、連続的にトリガーされます。このイベント中に、Calling PreventDefault()イベントはスクロールを防ぐことができます。
タッチエンドイベント:指が画面を離れるとトリガーされます。
TouchCancelイベント:システムがタッチの追跡を停止したときにトリガーされます。このドキュメントは、このイベントの正確な出発時間を指定していないため、推測することしかできません。
上記のすべてのイベントは泡立ち、キャンセルできます。これらのタッチイベントはDOM仕様では定義されていませんが、DOM互換の方法で実装されます。したがって、各タッチイベントオブジェクトは、マウスの練習で一般的な属性を提供します:バブル(バブルイベントのタイプ)、キャンセル(イベントに関連付けられているデフォルトのアクションがPreventDefault()メソッドでキャンセルできるかどうか)、ClientX(イベントがトリガーされたときにマウスポインターがトリガーされたときにマウスポインターの水平座標を返します)、クライアント(マウスポインターの垂直調整)(マウスポインターが返されます)イベントがトリガーされたときのマウスポインターの水平座標)、およびスクリーン状(イベントがトリガーされたときにマウスポインターの垂直座標を返します)。一般的なDOMプロパティに加えて、タッチイベントには、タッチを追跡するための次の3つの属性も含まれています。
タッチ:現在追跡されているタッチ操作を表すタッチオブジェクトの配列。
TargetTouches:イベントターゲットに固有のタッチオブジェクトの配列。
Changetouches:最後のタッチ以来変化したものを表すタッチオブジェクトの配列。
各タッチオブジェクトには、次のプロパティが含まれています。
ClientX:ViewPortのターゲットのX座標をタッチします。
クライアント:ビューポートのターゲットのY座標をタッチします。
識別子:タッチを識別する一意のID。
Pagex:ページのターゲットのX座標をタッチします。
Pagey:ページのターゲットのY座標をタッチします。
screenx:画面内のターゲットのX座標をタッチします。
スクリーン:画面内のターゲットのY座標にタッチします。
ターゲット:DOMノードのターゲットに触れます。
各タッチポイントには、次のタッチ情報(一般的に使用される)が含まれています。
識別子:タッチセッションで現在の指を一意に識別する値。一般的に、0(Android4.1、UC)から始まるフロー番号
ターゲット:DOM要素は、アクションのターゲットを絞ったターゲットです。
pagex/pagex/clientx/clientx/screenx/screeny:値、画面でアクションが発生する場合(ページにはスクロール距離が含まれ、クライアントにはスクロール距離が含まれていません。画面は画面に基づいています)。
Radiusx/Radiusy/Rotation Angle:指の形状、2つの半径、楕円の回転角にほぼ同等の楕円を描きます。予備的なテストブラウザはそれをサポートしていませんが、幸いなことに機能は一般的に使用されていないため、誰もがフィードバックを歓迎します。
JavaScript操作の小さな例:
JavaScriptコードコピーコンテンツにクリップボードに