ブラウザの標準動作に邪魔されずに常にタップ位置を取得したい

PointerEventだとだめで、TouchEventだとうまくいく

に処理すべきタッチはすべて入っているので、forEachで回せばOK

    canvas.addEventListener("touchstart", event => {
        console.log("touchstart");
        // 一旦デフォルトの動作をキャンセル
        event.preventDefault();
        event.stopPropagation();
        // canvas範囲を取得
        const rect = canvas.getBoundingClientRect();
        // 各changedTouchesについて、WorkerにPointerDownメッセージを送信
        Array.from(event.changedTouches).forEach(touch => {
            worker.postMessage({
                "type": "PointerDown",
                "lane": (touch.clientX - rect.left) / rect.width * 6 - 3,
                "time": audioUnit.element.currentTime,
                "id": touch.identifier,
            });
        });
        return false;
    }, { passive: false });

とりあえずPointerEventで実装したんだけどなんかおかしい

長押ししてるとcontextmenuイベントが発生(邪魔)

一旦TouchEventに変えてみるか……と考えている

changedTouchesをforEachでぶん回せばええやろ

勝利、もうPointerEvent使うのやめよう