touchstart,touchmove,touchendタッチイベントの小さな実践心得

最近html 5を使用して社内アプリケーションを開発しているが、タッチイベントはモバイルアプリケーションに必要であり、最初はモバイルデバイスでもマウスイベントをサポートするかもしれないと思っていたが、サポートされていなかった.幸い、webkitカーネルのモバイルブラウザでtouchイベントをサポートし、appにパッケージ化しても圧力はなかった.touchイベントはマウスイベントと同じ理屈だと思っていたが、実践の過程では難しくなかったが、多くの穴にぶつかって、まだ少し違いがあることに気づいた.

$(document).bind(touchEvents.touchstart, function (event) {
            event.preventDefault();
            
        });
        $(document).bind(touchEvents.touchmove, function (event) {
            event.preventDefault();
            
        });

        $(document).bind(touchEvents.touchend, function (event) {
            event.preventDefault();
            
        });

多くのブログでtouchと呼ばれる3つのイベントにはtargetTouches,touchesおよびchangedTouchesオブジェクトリストがありますが、実際にはそうではありません.touchendイベントにはchangedTouchesタッチインスタンスリストが1つしかないはずです.ここでは、コールバック関数のeventは普通のobjectオブジェクトにすぎません.実際にはeventにoriginalEvent属性があります.これこそ本当のtouchイベントです.このイベントには、マウスイベントと同様に、タッチイベントの位置などの属性を格納する3つのタッチインスタンスのリストが存在します.他の場所は基本的にマウスイベントと一致しています.この3つのタッチリストを簡単に紹介すると、touchesは画面上のすべての指のリストであり、targetTouchesは現在のDOM上の指のリストであるため、指が移動するとtouchendイベントがトリガーされるとevent.originalEventにはこのtargetTouchesリストはありませんが、changedTouchesリストは、touchendイベントなどの現在のイベントに関連するリストであり、指が移動します.次にpcとモバイル端末の適合について話します.html 5を使用する以上、もちろん彼のプラットフォームをまたぐ特性が気に入っています.iosとandroidだけでなく、pcで直接ページを開くのもいいですが、pcではマウスイベントだけをサポートしています.どうすればいいですか.上のコードのタッチイベントをよく見てtouchXXX、以下のコードを見てください.

var touchEvents = {
        touchstart: "touchstart",
        touchmove: "touchmove",
        touchend: "touchend",

        /**
         * @desc: pc ， pc， touch ， 
         */
        initTouchEvents: function () {
            if (isPC()) {
                this.touchstart = "mousedown";
                this.touchmove = "mousemove";
                this.touchend = "mouseup";
            }
        }
    };

PC上であればマウスイベントを用い,モバイル機器ではタッチイベントを用いるのが簡単で,pcの有無を判断するのに便利であり,多くの説明は行わない.