jquery:手機的觸屏事件

jquery:手機的觸屏事件

先寫媒體匹配
<meta name="viewport" content="width=300,maximum-scale=5.0,user-scalable=0">

觸屏事件 touch()
三個階段：start　　move　　 end

var startX,startY,moveX,moveY;
    $(".block").bind("touchstart",function(e){
        console.log(e.touches);
        /*輸出結果*/
        /*TouchList {0: Touch, length: 1}*/ /*0代表第一個手指*/
        /*0:
        Touch {identifier: 0, target: div.block, screenX: 387, screenY: 250, clientX: 70.50499725341797, …}
        length:1*/
        var touch= e.touches[0];

        startX=touch.pageX;
        startY=touch.pageY;
        console.log(startX)
        console.log(startY)
    }).bind("touchmove",function(e){
        var touch= e.touches[0];
        moveX=touch.pageX||touch.clientX;
        moveY=touch.pageY||touch.clientY;
        console.log(moveX)
    }).bind("touchend",function(){
        if(moveX-startX <=0){
            console.log("左滑")
		}
        else{
            console.log("右滑")
            console.log(moveX-startX)
        }
 })