我画布中的触摸事件没有按预期工作，我无法确定它无法正常工作的原因

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()
  }
}

虽然鼠标事件功能齐全，但允许在画布上绘图。触摸事件只能在画布的左边和上边框附近留出一个小空间，只有当你点击边框时，它才会被点亮。它应该像鼠标事件一样工作

Answer 1

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