PointerEvent 在短时间后停止触发

Question

我目前正在尝试获得与 Squid（笔记应用程序）类似的 touch/stylus 行为。我已经使用了 PointerEvent API 并且一切正常，除了一个烦人的问题：在我放下手写笔或手指后，它会在接下来的 ~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; 添加到 canvas 的样式属性中即可。

大约 0.3 秒后开始触摸事件作为页面滚动。

PointerEvent 在短时间后停止触发

PointerEvent stops firing after a short time

html

javascript

pointer-events

stylus-pen