html 5移動端の指タッチスクリーンイベント

ユーザは移動端でH 5を閲覧する際、指を使って一連の操作を行い、クリック、ダブルクリック、プルアップ、ドロップダウンなどの一連の操作を行い、ここでは主にtouchイベントについて簡単に紹介する.ユーザは指がスクリーンに触れるから指がスクリーンの真ん中を離れるまで、一連のtouchイベントがトリガーされます:①touchstart:指がスクリーンに触れたときにトリガーされます②touchmove:指がスクリーンをスライドしたときにトリガーされます③touchend:指がスクリーンを離れたときにトリガーされます④touchcancelイベント:システムがタッチを追跡するのを停止したときにトリガーされます(このイベントはあまり使われませんが、一般的には深く研究しません).一般的に、指がスクリーンに触れてから、指がスクリーンを離れるまで、少なくともtouchstart、touchmove、touchendの3つのイベントがトリガーされます.指が押されたときと持ち上げたときの位置が完全に同じではないからです(もちろん例外もあります).使用:この3つのイベントをリスニング:1.window.touchstart= function(event){} 2. window.touchmove= function(event){} 3. window.touchend= function(event){} event: 1. touches:現在追跡されているタッチ操作を表すtouchオブジェクトの配列.2.targetTouches:イベントターゲットに固有のTouchオブジェクトの配列.3.changeTouches:前回タッチしてから何が変わったかを示すTouchオブジェクトの配列.各touchオブジェクトに含まれる属性1.ClientX:ビューポート内のターゲットのx座標をタッチします.2.ClientY:ビューポート内のターゲットのy座標をタッチします.3.identifier:タッチを識別する一意のID.4.pageX:ページ内のターゲットのx座標をタッチします.5.pageY:ターゲットのページ内のy座標をタッチします.6.screenX:画面内のターゲットのx座標をタッチします.7.screenY:画面内のターゲットのy座標をタッチします.8.target:タッチのDOMノードターゲット.

          
var touchstartY = "";
window.ontouchstart = function(event) {
    touchstartY = event.changedTouches[0].screenY;//        Y  
}

var touchmoveY = "";
window.ontouchmove = function(event) {
    touchmoveY = event.changedTouches[0].screenY;//              
    if(touchmoveY * 1 <= touchstartY) {//                        
            return;
    }
    //           300                         
    if((touchmoveY - touchstartY) * 1 < 300) {

    }
    if((touchmoveY - touchstartY) * 1 >= 300) {

    }
}

var touchendY = "";
window.ontouchend = function(event) {
    touchendY = event.changedTouches[0].screenY;//        
    if(touchendY <= touchstartY) {//                          
            return;
    }
    //                                                   
}