HTML 5タッチイベント(touchstart、touchmove、touchend)(回転)

touchstartイベント:指が画面に触れるとトリガーされ、すでに指が画面に置かれていてもトリガーされます.
touchmoveイベント:指がスクリーン上をスライドしている間に連続的にトリガーされます.このイベントが発生している間、preventDefault()イベントを呼び出すと、スクロールがブロックされます.
touchendイベント:指がスクリーンから離れたときにトリガーされます.
touchcancelイベント:システムがタッチを追跡するのを停止したときにトリガーされます.この事件の正確な出発時間については、文書には具体的な説明がなく、推測するしかない.
touches:現在追跡されているタッチ操作を表すtouchオブジェクトの配列.
targetTouches:イベントターゲットに固有のTouchオブジェクトの配列.
changeTouches:前回タッチしてから何が変わったかを示すTouchオブジェクトの配列.　　
各Touchオブジェクトに含まれる属性は以下のとおりです.
ClientX:ビューポート内のターゲットのx座標をタッチします.
ClientY:ビューポート内のターゲットのy座標をタッチします.
identifier:タッチを識別する一意のID.
pageX:ページ内のターゲットのx座標をタッチします.
pageY:ページ内のターゲットのy座標をタッチします.
screenX:画面内のターゲットのx座標をタッチします.
screenY:画面内のターゲットのy座標をタッチします.
target:コンタクトのDOMノードターゲット.
上の属性はこのように見るだけで、やはり非常に煩雑で、それぞれの属性の言うのはすべてそんなに細かくて、真刀実銃の来点の小さい例だけがやっとその中の奥義をもっと理解することができます.だから小さな例は以下の通りです.　　

function load (){ 

    document.addEventListener('touchstart',touch, false); 
    document.addEventListener('touchmove',touch, false); 
    document.addEventListener('touchend',touch, false); 

    function touch (event){ 
        var event = event || window.event; 

        var oInp = document.getElementById("inp"); 

        switch(event.type){ 
            case "touchstart": 
                oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; 
                break; 
            case "touchend": 
                oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; 
                break; 
            case "touchmove": 
                event.preventDefault(); 
                oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; 
                break; 
        } 

    } 
} 
window.addEventListener('load',load, false);

上のコードを少し変更して、水平方向のスライドの方向を判断して、それから左の相応の動作、以下のようにします:

function load(){

    document.addEventListener('touchstart',touch, false);
    document.addEventListener('touchmove',touch, false);
    document.addEventListener('touchend',touch, false);

    function touch (event){
        var event = event || window.event;

        var oInp = document.getElementById("inp");
        var distance,clientX_start,clientX_end,
            minRange=10;
            this.clientX_start;
            this.direction;

            this.callbackFun=function(){
            if(this.direction=='ltr') {
                console.log('    ');
            }
            else {
                console.log('    ');
            }
            }
        switch(event.type){
            case "touchstart":
                clientX_start=event.touches[0].clientX;
                this.clientX_start=clientX_start;
                break;
            case "touchend":
                this.callbackFun();
                break;
            case "touchmove":
                event.preventDefault();

                clientX_end = event.changedTouches[0].clientX;
                //       
                distance=clientX_end-this.clientX_start;
                if(this.clientX_start+minRangethis.direction='ltr';
                }
                else if(this.clientX_start-minRange>clientX_end){
                    this.direction='rtl';
                }
                break;
        }  
    }
}

window.addEventListener('load',load, false);