我的 canvas 中的触摸事件没有按预期工作，我无法确定它不工作的原因

Question

所以我目前正在尝试为 Web 应用程序创建笔记本样式的模块。目前它在鼠标事件上工作得很好，但在使用触摸事件时却不行。

//TOUCH LISTENER
theCanvas.addEventListener("touchstart", startT, false);
theCanvas.addEventListener("touchend", endT, false);
theCanvas.addEventListener("touchmove", moveT, false);

//MOUSE LISTENER
theCanvas.addEventListener("mousedown", start);
theCanvas.addEventListener("mouseup", end);
theCanvas.addEventListener("mousemove", move, false);

//MOUSE EVENTS
function start(event) {
  if (event.button === MAIN_MOUSE_BUTTON) {
    shouldDraw = true;

        setLineProperties(theContext);

        theContext.beginPath();

    let elementRect = event.target.getBoundingClientRect();
        theContext.moveTo(event.clientX - elementRect.left, event.clientY - elementRect.top);

        console.log(PenType(mode));
  }
}

function end(event) {
  if (event.button === MAIN_MOUSE_BUTTON) {
    shouldDraw = false;
  }
}

function move(event) {
  if (shouldDraw) {
    let elementRect = event.target.getBoundingClientRect();
    theContext.lineTo(event.clientX - elementRect.left, event.clientY - elementRect.top);
        theContext.stroke()

  }
}

//TOUCH EVENTS
function startT(event) {
    event.preventDefault();
    shouldDraw = true;

    setLineProperties(theContext);

    theContext.beginPath();

    let elementRect = event.target.getBoundingClientRect();
    theContext.moveTo(event.clientX - elementRect.left, event.clientY - elementRect.top);

    console.log(PenType(mode));
}

function endT(event) {
  if (event.touches.length == 1) {
        event.preventDefault();
    shouldDraw = false;
  }
}

function moveT(event) {
  if (shouldDraw) {
        event.preventDefault();
    let elementRect = event.target.getBoundingClientRect();
    theContext.lineTo(event.clientX - elementRect.left, event.clientY - elementRect.top);
        theContext.stroke()
  }
}

虽然鼠标事件功能齐全并允许在 canvas 上绘图。触摸事件只有 canvas 左上边框附近的一个小 space 可以绘制，只有当你点击边框时，它只是一个点。它应该像鼠标事件一样工作

Answer 1

由于触摸事件可以处理多个触摸点，因此手指的 x 和 y 不像鼠标那样用 event.clientX 和 event.clientY 来描述。相反，你得到了 event.touches 这是一个坐标数组。所以在你的代码中，每次你想处理触摸事件时，只需将 event.clientX 替换为 event.touches[0].clientX 并将 event.clientY 替换为 event.touches[0].clientY （当然考虑到你只想处理一根手指）

我的 canvas 中的触摸事件没有按预期工作，我无法确定它不工作的原因

The touch event in my canvas is not working as intended and I am not able to identify the reason why it is not working

javascript

canvas

mobile

browser

touch-event