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

2024-07-28

解決策

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

実装

code:main.js

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

/icons/hr.icon

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

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

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

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

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