移动端touch事件

一.touch事件

1.touchstart：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
2.touchmove：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
3.touchend：当手指从屏幕上离开的时候触发。
4.touchcancel：当系统停止跟踪触摸的时候触发。关于这个事件的确切触发时间，文档中并没有具体说明

二.touch事件对象

移开屏幕的那个触摸点，只会包含在changedTouches列表中，而不会包含在touches 和targetTouches 列表中。只有一个手指时，touches[0],targetTouches[0],changedTouches[0]是一样的

touches	表示当前跟踪的触摸操作的touch对象的数组。由于触摸属性都会生成数组，因此你可以使用JavaScript数组函数来访问它们。这意味着，event.touches[0]将返回第一次 触摸，并且可以使用event.touches.length来计算当前存储的触摸数量。 查看单独触摸时，通过使用event.targetTouches[0],你也可以访问其它触摸，每个触摸会包含一些具体信息， event.touches[0].length ==1 //判断只有一个手指的时候
targetTouches	是当前对象上所有触摸点的列表;
changeTouches	表示自上次触摸以来发生了什么改变的Touch对象的数组。(多点触摸) 1、当我用一个手指触碰屏幕的时候，这三个属性的值都是相同的。之所以changedTouches也会保存相同的信息是因为触摸屏幕的这个手指正是引发事件的原因。 2、当我再用第二个手指触碰屏幕的时候，touches会保存这两个手指的信息，如果这两个手指触摸的是同一个node结点的话，targetTouches也会保存这两个手指的信息。changedTouches会保存第二个手指的信息，因为第二个手指是引发事件的原因。 3、如果我用两个手指同时触摸屏幕，那么changedTouches会保存这两个手指的信息。 4、如果我在屏幕上滑动我的手指，那么只有changedTouches的值会发生改变，而且有几个手指在滑动，它就会保存几个手指的信息。 5、如果我抬起一个手指，那么这个手指的信息会从touches和targetTouches中移除，同时这个手指的信息会保存在changedTouches中，因为这个抬起的手指是引发事件的原因。 6、再抬起我的第二根手指，这时候touches和targetTouches都为空，changedTouches保存第二根手指的信息。

三.touch事件对象属性

identifier： 标识触摸的唯一ID (可理解为手指1，手指2...)

clientX：触摸目标在视口中的x坐标,不随滚动条变化。

clientY：触摸目标在视口中的y坐标,不随滚动条变化。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触目的DOM节点目标。

禁止默认滚动event.preventDefault();

四.触摸坐标

window.addEventListener("load",function(){
    var box1 = document.getElementById("box1"),
        statusdiv = document.getElementById("statusdiv"),
        startx = 0,
        dist = 0;

    box1.addEventListener("touchstart",function(e){
        var touchobj = e.changedTouches[0];     //第一个手指触摸
        startx = parseInt(touchobj.clientX);　　//坐标
        statusdiv.innerHTML = "Status:touchstart<br> ClientX:"+startx+ "px";
        e.preventDefault();
    },false)

    box1.addEventListener("touchmove",function(e){
        var touchobj = e.changedTouches[0];
        var dist = parseInt(touchobj.clientX) - startx;
        statusdiv.innerHTML = "Status:touchmove<br> Horizontal distance raveled:" + dist + "px";
        e.preventDefault();
    },false)

    box1.addEventListener("touchend",function(e){
        var touchobj = e.changedTouches[0];
        statusdiv.innerHTML = 'Status: touchend<br> Resting x coordinate: ' + touchobj.clientX + 'px'
        e.preventDefault();
    },false)
},false)

五.canvas触摸小点

window.addEventListener("load",function(){
    init();
    function init(){
        var touchzone = document.getElementById("mycanvas");
        touchzone.addEventListener("touchstart",draw,false);    //绑定事件
    }

    function draw(){
        var canvas = document.getElementById("mycanvas");

        if(canvas.getContext){
            var ctx = canvas.getContext("2d");   //创建canvas文本
            ctx.fillRect(event.touches[0].pageX,event.touches[0].pageY,5,5);
        }
    }
},false)

六.拖拽

window.addEventListener("load",function(){
    var box = document.getElementById("box"),
        boxleft,        //box移动的左位置
        startx,         //触摸开始点的坐标
        dist = 0,       //移动距离
        touchobj = null;
    box.addEventListener("touchstart",function(e){
        touchobj = e.changedTouches[0];         //第一触摸点
        boxleft = parseInt(box.style.left);     //获取left值
        startx = parseInt(touchobj.clientX);    //获取坐标值
        e.preventDefault();                     //阻止默认行为
    },false)

    box.addEventListener("touchmove",function(e){
        touchobj = e.changedTouches[0];
        var dist = parseInt(touchobj.clientX) - startx;         //计算移动距离
        //判断是否移动到边缘
        box.style.left = ( (boxleft + dist > 220)? 220 : (boxleft + dist < 0)? 0 : boxleft + dist ) + 'px'
        e.preventDefault();
    },false)
    
    document.body.addEventListener("touchmove",function(e){
        e.preventDefault();
    },false)
},false)

七.屏幕写字

window.addEventListener("load",function(){
    var canvas,
        ctx,
        lastPt = null;

    init()
    function init(){
        var touchzone = document.getElementById("mycanvas");
        touchzone.addEventListener("touchmove",draw,false);
        touchzone.addEventListener("touchend",end,false);
        ctx = touchzone.getContext("2d");
    }

    function draw(e){
        e.preventDefault();
        if(lastPt != null){
            ctx.beginPath();
            ctx.moveTo(lastPt.x,lastPt.y);
            ctx.lineTo(e.changedTouches[0].pageX,e.changedTouches[0].pageY);
            ctx.stroke();
        }
        lastPt = {x:e.changedTouches[0].pageX, y:e.changedTouches[0].pageY}
    }

    function end(e){
        e.preventDefault();
        lastPt = null;
    }
},false)

八.HTML5 multi-touch  多指触摸画图

window.addEventListener("load",function(){
    var canvas,
        ctx,
        lastPt = new Object(),
        colours = ["red","green","blue","yellow","black"];

    init();
    function init(){
        var touchzone = document.getElementById("mycanvas");
        touchzone.addEventListener("touchmove",draw,false);
        touchzone.addEventListener("touchend",end,false);
        canvas = document.getElementById("mycanvas");
        ctx = canvas.getContext("2d");
    }
    function draw(e){
        e.preventDefault();
        for(var i = 0; i < e.touches.length; i++){
            var id = e.touches[i].identifier;
            if(lastPt[id]){
                ctx.beginPath();
                ctx.moveTo(lastPt[id].x,lastPt[id].y);
                ctx.lineTo(e.touches[i].pageX, e.touches[i].pageY);
                ctx.strokeStyle = colours[id];          //canvas的颜色
                ctx.stroke();
            }
            lastPt[id] = {x:e.touches[i].pageX, y:e.touches[i].pageY}
        }
    }
    function end(e){
        e.preventDefault();
        for(var i = 0; i < e.changedTouches.length; i++){   //循环所有手指
            var id = e.changedTouches[i].identifier;        
            delete lastPt[id];
        }
    }
},false)