Javascript 画布中的触摸事件未按预期工作，我无法确定其不工作的原因

因此，我目前正在尝试为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()
  }
}

---

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

，因为触摸事件可以处理多个触摸点，手指的x和y不由event.clientX和event.clientY来描述。取而代之的是event.touch，它是一个坐标数组。因此，在您的代码中，每次您想处理touch事件时，只需将

event.clientX

替换为

event.touch[0]。clientX

和

event.clientY

替换为

event.touch[0]。clientY

（考虑到您当然只想处理一根手指）