html5_html5 チュートリアル スキルを使用したタッチ スクリーン Web サイト構築におけるタッチ イベントの概要

はじめに
タッチスクリーン Web サイトと従来の PC Web サイトの違いは何ですか? インタラクション方法の変化が矢面に立たされています。たとえば、一般的に使用されるクリック イベントは、タッチ スクリーン デバイスでは非常に無力です。
携帯電話でのほとんどのインタラクションはタッチを通じて行われるため、タッチ スクリーンのインタラクティブ Web サイトではタッチ イベントが非常に重要です。
Apple は iOS 2.0 でタッチ イベント API を導入し、Android がこの事実上の標準に追いつき、差を縮めています。最近、W3C ワーキング グループが協力してこのタッチ イベント仕様の開発に取り組んでいます。

仕様
ここでは、いくつかの一般的なタッチ イベントを紹介します。このイベントは、ほとんどの最新のブラウザーでテストできます (タッチ スクリーン デバイスである必要があります):
touchstart: トリガーされるタイミング。タッチの開始
touchmove: 指が画面上でスライドするとトリガーされます
touchend: タッチが終了するとトリガーされます
そして、各タッチ イベントには 3 つのタッチ リストが含まれており、各リストには対応する一連のタッチ ポイントが含まれます (マルチタッチを実装します):
touches: 現在画面上にあるすべての指のリスト。
targetTouches: 現在の DOM 要素上にある指のリスト。
changedTouches: 現在のイベントに関係する指のリスト。
各タッチ ポイントには、次のタッチ情報 (一般的に使用されます) が含まれます。
識別子: タッチ セッションで現在の指を一意に識別する数値。通常は 0 から始まるシリアル番号 (android4.1、uc)
target: アクションのターゲットとなる DOM 要素。
pageX/pageX/clientX/clientY/screenX/screenY: 値、アクションが発生する画面上の位置 (ページにはスクロール距離が含まれますが、クライアントにはスクロール距離が含まれません。画面は画面に基づきます) 。
radiusX/radiusY/rotationAngle: 楕円の 2 つの半径と回転角度をそれぞれ使用して、指の形状にほぼ等しい楕円を描画します。幸いなことに、この機能は一般的には使用されていません。
この情報により、これらのイベント情報に基づいてユーザーにさまざまなフィードバックを提供できます。

以下に、touchmove を使用して 1 本指でドラッグする簡単なデモを示します :

コードをコピーします

コードは次のとおりです。

/*1 本の指でドラッグ*/
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 つのヒント : タグ、link、visited、active、および hover の 4 つの疑似クラスが、クリック イベント用に特別に設計されていることは誰もが知っています。タッチスクリーン Web サイトでは使用しないでください。テスト後、それらのほとんどは利用できなくなりました。ただし、ボタンをクリックすると、ボタンは常にホバー状態になります。このとき、この疑似クラスに基づいて設定した CSS も、指で別のボタンをクリックするまで機能します。 1 つのボタンでホバー状態が別のボタンに転送されます。これを使用して、いくつかの小さなエフェクトを作成できます。このトリックはほとんどのブラウザで今でも機能します。


理想はいっぱい、現実はガリガリ！ w3c はマルチタッチに対応していますが、残念ながらマルチタッチ機能をサポートしているブラウザはほとんどなく、特に Android プラットフォームのブラウザでは、上で紹介した指のリストが空のトークになり、2 つのタッチ ポイントをキャプチャするとタッチの失敗に直結します。幸いなことに、iOS デバイスに付属の Safari ブラウザーはこの機能をサポートしているため、将来に期待が持てます。結局のところ、私たちはマウスのシングルクリック操作にあまりにも長い間囚われてきました。複数の指で Web サイトを操作するのはなんと楽しいことでしょう。