pointerEventメモ #JavaScript

マウスアクションでできるPointer Eventsで使いそうなイベントをメモ

const mouseEventContent = document.getElementById('mouseEventContent');
mouseEventContent.addEventListener('pointerover', (event) => {
  console.log('ポインターが要素内に入った');
});
mouseEventContent.addEventListener('pointerout', (event) => {
  console.log('ポインターが要素外に出た');
});
mouseEventContent.addEventListener('pointerdown', (event) => {
  console.log('マウスクリック');
});
mouseEventContent.addEventListener('pointermove', (event) => {
  console.log('マウスを要素内で動かした');
});
mouseEventContent.addEventListener('pointerup', (event) => {
  console.log('マウスクリックアップ');
});

現在はPCの他にスマホからもWEBにアクセスできるので、異なるデバイスでも同じ動作をさせようとするのは一工夫必要。
難しい場合はWebまたはスマホ専用サイトとして設計することも考慮する

pointerEventメモ

参考