рисунок на холсте мобильный

Question

Я пытаюсь рисовать на холсте, чтобы сделать простую рисовальную панель. Он отлично работает на ПК. Но на мобильном телефоне я могу только «нарисовать» точку, я не могу ее перетащить. Я не понимаю, что может быть проблемой, поскольку у меня есть событие touchmove.

Вот мой snipet кода:

canvas.addEventListener("mousedown", mouseDown, false); 
    canvas.addEventListener("mousemove", mouseXY, false); 
    document.body.addEventListener("mouseup", mouseUp, false); 

    //For mobile 
    canvas.addEventListener("touchstart", mouseDown, false); 
    canvas.addEventListener("touchmove", mouseXY, true); 
    canvas.addEventListener("touchend", mouseUp, false); 
    document.body.addEventListener("touchcancel", mouseUp, false); 

    function draw() { 
     context.clearRect(0, 0, canvas.width, canvas.height); // Clears the canvas 

     context.strokeStyle = "#000000"; //set the "ink" color 
     context.lineJoin = "miter";  //line join 
     context.lineWidth = 2;   //"ink" width 

     for (var i = 0; i < clickX.length; i++) { 
      context.beginPath();        //create a path 
      if (clickDrag[i] && i) { 
       context.moveTo(clickX[i - 1], clickY[i - 1]); //move to 
      } else { 
       context.moveTo(clickX[i] - 1, clickY[i]);  //move to 
      } 
      context.lineTo(clickX[i], clickY[i]);    //draw a line 
      context.stroke();         //filled with "ink" 
      context.closePath();        //close path 
     } 
    } 

    function addClick(x, y, dragging) { 
     clickX.push(x); 
     clickY.push(y); 
     clickDrag.push(dragging); 
    } 

    function mouseXY(e) { 
     if (paint) { 
       addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop - 40, true); 
       draw(); 
      } 
    } 

    function mouseUp() { 
     paint = false; 
    } 

    function mouseDown(e) 
    { 
     var mouseX = e.pageX - this.offsetLeft; 
      var mouseY = e.pageY - this.offsetTop; 
      paint = true; 
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop - 40); 
      draw(); 
    } 

Answer 1

Проблема может быть, что событие пузырится и вызывает проблемы на мобильном телефоне. Чтобы предотвратить операцию прокрутки по умолчанию, попробуйте это ...

function mouseXY(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    if (paint) { 
     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop - 40, true); 
     draw(); 
    } 
    return false; 
} 


function mouseDown(e) { 
    e.preventDefault(); 
    e.stopPropagation();  
    var mouseX = e.pageX - this.offsetLeft; 
    var mouseY = e.pageY - this.offsetTop; 
    paint = true; 
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop - 40); 
    draw(); 
    return false; 
}