PointerEvent 在短时间内停止触发

Question

我目前正在尝试获得与 Squid（笔记应用程序）类似的触摸/手写笔行为。我已经使用了PointerEventAPI，它一切正常，除了一个恼人的问题：在我放下手写笔或手指后，它会在接下来的约 0.3 秒内绘制一笔，但在那之后，pointermove只要指针向下。

这是我的代码：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <canvas id="canvas" width="500px" height="500px" style=" position: absolute;border: 2px solid red;"></canvas>
    <script src="index.js"></script>

</body>

</html>

index.js

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "white"

var pos = {}

canvas.addEventListener("pointerdown", function (e) {
    pos.x = e.pageX;
    pos.y = e.pageY;
});

canvas.addEventListener("pointermove", function (e) {
    console.log(e.pressure)

    switch (e.pointerType) {
        case "pen":
            ctx.beginPath();
            ctx.moveTo(pos.x, pos.y);
            ctx.lineTo(e.pageX, e.pageY);
            ctx.stroke();

            pos.x = e.pageX;
            pos.y = e.pageY;

            break;
        case "touch":
            ctx.fillRect(e.pageX - 10, e.pageY - 10, 20, 20);

            break;
    }
});

index.css只是一个CSS重置

我对此感到非常困惑，似乎找不到其他遇到此问题的人。任何帮助，将不胜感激！

Answer 1

只需添加touch-action: none;到画布的样式属性即可。

约 0.3 秒后，随着页面滚动开始触摸事件。