HTML5携帯電話タッチスクリーンタッチイベントの詳細な紹介

HTML5 では多くの新しいイベントが追加されていますが、互換性の問題があまり理想的ではなく、実用性があまり高くないため、ここでは基本的に省略して、優れたアプリケーションと広く互換性のあるイベントのみを紹介します。今後、互換性の状況が改善され次第、シェアは順次追加される予定です。

今日紹介するイベントは主にタッチイベントです:

touchstart: タッチが開始されるとトリガーされます
touchmove: 指が画面上をスライドするとトリガーされます
touchend: タッチが終了するとトリガーされます

そして、各タッチイベントには以下が含まれます3 つのタッチ リスト。各リストには、対応する一連のタッチ ポイント (マルチタッチの実装に使用) が含まれます。

タッチ: 現在画面上にあるすべての指のリスト。
targetTouches: 現在の DOM 要素上にある指のリスト。
changedTouches: 現在のイベントに関係する指のリスト。

各タッチ ポイントには、次のタッチ情報 (一般的に使用される) が含まれます:

識別子: タッチ セッションで現在の指を一意に識別する数値。一般的には0から始まるシリアル番号（android4.1、uc）
target: アクションのターゲットとなるDOM要素。
pageX/pageX/clientX/clientY/screenX/screenY: 値、アクションが発生する画面上の位置 (ページにはスクロール距離が含まれますが、クライアントにはスクロール距離は含まれません。画面は画面に基づきます)。
radiusX/radiusY/rotationAngle: 楕円の 2 つの半径と回転角度をそれぞれ使用して、指の形状にほぼ等しい楕円を描画します。幸いなことに、この機能は一般的には使用されていません。

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

var obj = document.getElementByIdx_x('id');
obj.addEventListener('touchmove', function(event) {
     // 如果这个元素的位置内只有一个手指的话
    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';
        }
}, false);

以上がHTML5携帯電話タッチスクリーンタッチイベントの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。