Javascript touchstart在画布中不工作（在模式中）

我尝试使用Javascript在引导模式中绘制线条。 我的代码在deskstop屏幕上运行良好。 但是当我使用移动设备时，它就不工作了

这是我的密码：

"use strict";
class Signature {
    constructor() {
        this.color = "#000000";
        this.sign = false;
        this.begin_sign = false;
        this.width_line = 5;
        this.canvas = document.getElementById('canvas');
        this.offsetLeft = this.canvas.offsetLeft;
        this.offsetTop = this.canvas.offsetTop;
        this.context = canvas.getContext('2d');
        this.context.lineJoin = 'round'; 
        this.context.lineCap = 'round'; 
        this.whenActionDown();
        this.whenActionUp();
        this.whenActionMove();
        this.createSignature();
        this.clearCanvas();
        this.resetCanvas();
    }

    updateMousePosition(mX, mY) {
    let rect = this.canvas.getBoundingClientRect();
    let scaleX = this.canvas.width / rect.width;
    let scaleY = this.canvas.height / rect.height;
    this.cursorX = (mX - rect.left) * scaleX;
    this.cursorY = (mY - rect.top) * scaleY;
}

    actionDown(e) {
        this.sign = true;
        this.updateMousePosition(e.clientX, e.clientY);
    }

    actionUp() {
        this.sign = false;
        this.begin_sign = false;
    }

    actionMove(e) {
        if (this.sign) {
            this.updateMousePosition(e.clientX, e.clientY);
            this.createSignature();
        }
    }



    whenActionDown() {
        document.addEventListener("mousedown", this.actionDown.bind(this));
      document.addEventListener("touchstart", this.actionDown.bind(this));
    }

    whenActionUp() {
        document.addEventListener("mouseup", this.actionUp.bind(this));
      document.addEventListener("touchend", this.actionUp.bind(this));
    }


    whenActionMove() {
        this.canvas.addEventListener('mousemove', this.actionMove.bind(this));
        this.canvas.addEventListener('touchmove', this.actionMove.bind(this));
    }


    createSignature() {

        if (!this.begin_sign) {

            this.context.beginPath();
            this.context.moveTo(this.cursorX, this.cursorY);
            this.begin_sign = true;
        }

        else {
            this.context.lineTo(this.cursorX, this.cursorY);
            this.context.strokeStyle = this.color;
            this.context.lineWidth = this.width_line;
            this.context.stroke();
        }
    }

    clearCanvas() {
        this.context.clearRect(0, 0, this.canvas.offsetWidth, this.canvas.offsetHeight);
    }
    // Reset :
    resetCanvas() {
        document.getElementById("reset").addEventListener("click", () => {
            this.clearCanvas();
        })
    }
}

document.addEventListener("DOMContentLoaded", event => {
    new Signature();
});

我知道touchstart、touchmove和touchend应该让我的代码在移动设备上工作，但它不起作用。 有什么想法吗

---

谢谢

因为手机可以有多个联络点，所以可以使用

event.touchs来跟踪坐标，因此您可以执行以下操作

const coords = event.touches ? event.touches[0] : event;
console.log(coords.clientX, coords.clientY)

此处的更多信息
由于移动设备可以有多个接触点，因此可以使用
event.touchs来跟踪坐标
，以便执行以下操作

const coords = event.touches ? event.touches[0] : event;
console.log(coords.clientX, coords.clientY)

更多信息请点击此处
谢谢您的帮助。但我如何实现这一点？我想我应该做一些类似“如果是手机，那么做吧，如果是桌面，那么做吧……”谢谢你的帮助。但我如何实现这一点？我想我应该做一些像“如果是手机，那么做，如果是桌面，那么做…”