コメント：携帯電話でのインタラクションのほとんどはタッチによって達成されるため、タッチスクリーンインタラクティブなWebサイトでは、タッチイベントが非常に重要です。ここでは、より人気のあるいくつかのタッチイベントを紹介します。このイベントは、ほとんどの最新のブラウザでテストできます。興味のある友達はそれについて学ぶことができます。
序文タッチスクリーンのWebサイトと従来のPC Webサイトの違いは何ですか？相互作用方法の変化は、最初に影響を受けることです。たとえば、よく使用するクリックイベントは、タッチスクリーンデバイスの下で非常に無力です。
携帯電話での対話のほとんどはタッチによって達成されるため、タッチイベントは、タッチ画面を使用したインタラクティブなWebサイトにとって非常に重要です。
AppleはiOS 2.0にTouch Event APIを導入し、Androidはこの事実標準に追いついてギャップを狭めています。最近、W3Cワーキンググループが協力してこのタッチイベントNormを策定しています。
仕様
ここでは、より人気のあるいくつかのタッチイベントを紹介します。このイベントは、ほとんどの最新のブラウザでテストできます（タッチスクリーンデバイスである必要があります）：
TouchStart：タッチが始まるとトリガーされます
TouchMove：指が画面上でスライドするとトリガーされます
Touchend：タッチが終了するとトリガーされます
各タッチイベントには3つのタッチリストが含まれています。各リストには、対応する一連のタッチポイント（マルチタッチの実装に使用）が含まれています。
タッチ：現在画面にあるすべての指のリスト。
TargetTouches：現在のDOM要素にある指のリスト。
変更されたもの：現在のイベントを含む指のリスト。
各タッチポイントには、次のタッチ情報（一般的に使用される）が含まれています。
識別子：タッチセッションで現在の指を一意に識別する値。一般的に、0（Android4.1、UC）から始まるフロー番号
ターゲット：DOM要素は、アクションのターゲットを絞ったターゲットです。
pagex/pagex/clientx/clientx/screenx/screeny：値、画面でアクションが発生する場合（ページにはスクロール距離が含まれ、クライアントにはスクロール距離が含まれていません。画面は画面に基づいています）。
Radiusx/Radiusy/Rotation Angle：指の形状、2つの半径、楕円の回転角にほぼ同等の楕円を描きます。予備的なテストブラウザはそれをサポートしていませんが、幸いなことに機能は一般的に使用されていないため、誰もがフィードバックを歓迎します。
この情報を使用すると、これらのイベント情報に基づいてユーザーに異なるフィードバックを提供できます。
以下に、TouchMoveを使用して小さなデモ、シングルフィンガードラッグを示します。
/*単一の指でドラッグ*/
var obj = document.getElementById（ 'id'）;
obj.addeventlistener（ 'touchmove'、function（event）{
//この要素の位置に指が1つしかない場合
if（event.targetTouches.length == 1）{
event.preventdefault（）; //ブラウザのデフォルトイベントをブロックする重要です
var touch = event.targetTouches [0];
//指がある場所に要素を置きます
obj.style.left = touch.pagex-50 + 'px';
obj.style.top = touch.pagey-50 + 'px';
}
}、 間違い）;
タッチスクリーンデバイスのタグの4つの擬似クラスのヒント：
訪問、アクティブ、およびホバーの4つの擬似クラスがクリックイベント用に設計されていることを知っているので、タッチスクリーンWebサイトでそれらを使用しないようにしてください。ほとんどのテストも利用できません。しかし、ここにホバーについてのちょっとしたトリックがあります。ボタンをクリックすると、ボタンはホバー状態に残ります。この時点で、この擬似クラスに基づいて設定したCSSは、指で別のボタンをクリックするまで動作します。ホバー状態は別のボタンに転送されます。これを使用して、いくつかの小さなエフェクトを作成できます。このトリックは、ほとんどのブラウザでまだ利用できます。
理想はいっぱいです、現実は細いです！
W3Cはマルチタッチの準備ができていますが、残念ながら、特にAndroidプラットフォームのブラウザをサポートするブラウザはほとんどありません。 2つのタッチポイントをキャプチャすると、タッチの失敗が直接つながります！幸いなことに、iOSデバイスが付属しているSafariブラウザはこの機能をサポートできます。これにより、将来への希望に満ちています。結局のところ、私たちはマウスの単一点操作によって長すぎると投獄されてきました。ウェブサイトをもっと使うのはなんてエキサイティングでしょう！