javascript移动设备触屏事件

javascript移动设备触屏事件

ontouchstart
ontouchmove
ontouchend
ontouchcancel

目前移动端浏览器均支持这4个触摸事件；

/**
* onTouchEvent
*/
var div = document.getElementById("div");

//touchstart类似mousedown


div.ontouchstart = function(e){
//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控，所以直接指向[0]
var touch = e.touches[0];
//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};



//touchmove类似mousemove
div.ontouchmove = function(e){
    //可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等
    e.preventDefault();
};

//touchend类似mouseup
div.ontouchup = function(e){
        //nothing to do


};

在手机上用javascript在canvas上画线

        var cnv = document.getElementById('myCanvas');
        var ctx = cnv.getContext('2d');
        ctx.strokeStyle="red";
        var paint = false;
        
        cnv.ontouchstart =function(e){
             
                e.preventDefault();
                paint = !paint;
                var touch = e.touches[0];                
                var x = touch.clientX;
                var y = touch.clientY;

                 ctx.moveTo(x,y);

            }

           
             
        cnv.ontouchmove =function(e){
            e.preventDefault();
            if(paint){                    
                var touch = e.touches[0];                
                var x = touch.clientX;
                var y = touch.clientY;
                ctx.lineTo(x,y);
                ctx.stroke();                
            }
            
           }
             
        cnv.ontouchend =function(e){
            e.preventDefault();        
            paint = !paint;            
          }