pc端点击事件及移动端touch事件

1.pc端  鼠标点击事件

三种：mousedown、mousemove、mouseup

在写事件的过程中，一定要在事件前面添加on

比如：

//    dright.onmousedown = function(e){
//        dright.onmousemove = mousemove(e);
//        dright.onmouseup = mouseup;
//        e = e || window.event;
//        if (last_left > 0){
//            ox = e.clientX -last_left;
//        }else{
//            ox = e.clientX - dright.scrollLeft;
//        }
//        if (1 == e.which){
//            //doMouseClick(e);
//            type = 1;
//            drawLine(e);
//        }else if (3 == e.which){
//            //doDoubleMouseClick(e);
//            type = 3;
//            drawLine(e);
//        }
//    };

另外也可以通过添加事件监听的方式进行

    dright.addEventListener("click",function(e){
        mousemove(e);
        var x = event.clientX - rCanvas.getBoundingClientRect().left; 
        if (1 == e.which){
            type = 1;
            drawLine(x);
        }else if (3 == e.which){
            type = 3;
            drawLine(x);
        }
      });

 

2.移动端touch事件

四种：touchstart、touchmove、touchend、touchcancel

也可以在前面加on

也可以添加事件监听。

    dright.addEventListener("touchstart",function(e){
         e.preventDefault();
         
         var x = e.touches[0].clientX - rCanvas.getBoundingClientRect().left;
        // drawLine(x);
         ismove = false;
         index = x;
         if (last_left > 0 || last_left < 0){
            ox = e.touches[0].clientX -last_left;
            oy = e.touches[0].clientY - last_y;
         }else{
            ox = e.touches[0].clientX - dright_canvas.scrollLeft;
            oy = e.touches[0].clientY - dright_canvas.scrollTop
         }
      });
    
    dright.addEventListener("touchmove",function(e){
         e.preventDefault();
         ismove = true;
         last_left = e.touches[0].clientX - ox;
         last_y = e.touches[0].clientY - oy;
         var x = e.touches[0].clientX; 
         var y = e.touches[0].clientY; 
         dright_canvas.scrollLeft = -(x - ox);
         dright_canvas.scrollTop = -(y - oy);
         timebox.css('margin-left',startOffset-dright_canvas.scrollLeft);
         
      });
    
    dright.addEventListener("touchend",function(e){
         e.preventDefault();
         touchend();
         if (!ismove){
             drawLine(index);
         }
      });