pointerdown、pointerup、pointermoveは、ポインタデバイス（マウス、タッチスクリーン、スタイラスなど）による操作を検知するためのイベントです。これらのイベントを利用することで、ドラッグ操作や描画、ジェスチャーの実装が可能になります。今回は、それぞれのイベントの特徴や使い方をまとめていきたいと思います。
目次 非表示
ポインターイベントは、複数の入力デバイス（マウス、タッチ、ペンなど）を統一的に扱うために導入されました。これにより、従来のmousedown、touchstartなどのイベントを個別に処理する必要がなくなり、コードがシンプルになります。
pointerdown: ポインターデバイスがターゲットを押したときに発生します。pointerup: ポインターデバイスがターゲットから離されたときに発生します。pointermove: ポインターが動いたときに発生します。
ポインターイベントは、addEventListenerなどメソッドを使用します。
const element = document.getElementById('target');
element.addEventListener('pointerdown', (event) => {
console.log('Pointer down detected', event);
});
element.addEventListener('pointerup', (event) => {
console.log('Pointer up detected', event);
});
element.addEventListener('pointermove', (event) => {
console.log('Pointer moved', event);
});以下の例では、pointerdown、pointermove、pointerupを使用してキャンバス上に線を描画します。
See the Pen pointerdown / pointerup / pointermove by tones (@tonescodedesign) on CodePen.
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
canvas.addEventListener('pointerdown', (event) => {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(event.offsetX, event.offsetY);
});
canvas.addEventListener('pointermove', (event) => {
if (!isDrawing) return;
ctx.lineTo(event.offsetX, event.offsetY);
ctx.stroke();
});
canvas.addEventListener('pointerup', () => {
isDrawing = false;
});
canvas.addEventListener('pointerleave', () => {
isDrawing = false; // キャンバス外にポインタが移動した場合も描画を停止
});<canvas id="drawingCanvas" width="500" height="400"></canvas>canvas {
border: 1px solid #ccc;
cursor: crosshair;
}このコードを使うと、マウスやタッチ操作でキャンバス上に線を描くことができます。pointerdownで描画を開始し、pointermoveで線を描き、pointerupで描画を終了します。
次の例では、ポインターイベントを利用して簡単なドラッグアンドドロップを実装します。
See the Pen pointerdown / pointerup / pointermove by tones (@tonescodedesign) on CodePen.
const box = document.getElementById('draggableBox');
let isDragging = false;
box.addEventListener('pointerdown', (event) => {
isDragging = true;
box.setPointerCapture(event.pointerId);
box.style.cursor = 'grabbing';
});
box.addEventListener('pointermove', (event) => {
if (!isDragging) return;
box.style.left = `${event.clientX - box.offsetWidth / 2}px`;
box.style.top = `${event.clientY - box.offsetHeight / 2}px`;
});
box.addEventListener('pointerup', () => {
isDragging = false;
box.style.cursor = 'grab';
});<div class="draggable" id="draggableBox"></div> .draggable {
width: 100px;
height: 100px;
background-color: lightblue;
border: 1px solid #000;
position: absolute;
cursor: grab;
}このコードでは、pointerdownでドラッグを開始し、pointermoveで要素を移動し、pointerupでドラッグを終了します。
setPointerCaptureを使用することで、pointermoveイベントをその要素に限定できます。これにより、ドラッグ操作中にポインタが要素外に移動しても正しく動作します。
ポインターイベントは多くのブラウザでサポートされていますが、古いブラウザや特殊な環境ではサポートされていない場合があります。pointerdownの代わりにmousedownやtouchstartをフォールバックとして実装することを検討してください。
pointermoveイベントは非常に頻繁に発生するため、不要な処理を避けるよう心掛けてください。必要であれば、デバウンスやスロットリングを利用しましょう。
