← カテゴリ一覧に戻る

クリック・ホバーの検知

click mouseenter mouseleave contextmenu

マウスクリック・ホバー・右クリックなどのイベントを検知して処理します。

デモ：マウスイベント

クリック: 0 回
ダブル: 0 回
ここにマウスを乗せてください

コード例

js
const btn = document.querySelector('button');
const box = document.querySelector('.box');

// クリック
btn.addEventListener('click', (e) => {
  console.log('クリック位置:', e.clientX, e.clientY);
  console.log('修飾キー:', e.ctrlKey, e.shiftKey, e.altKey);
});

// ダブルクリック
btn.addEventListener('dblclick', () => console.log('ダブルクリック'));

// 右クリック（コンテキストメニュー）
btn.addEventListener('contextmenu', (e) => {
  e.preventDefault(); // デフォルトメニューを抑制
  console.log('右クリック');
});

// ホバー（マウスイン・アウト）
box.addEventListener('mouseenter', () => box.classList.add('hover'));
box.addEventListener('mouseleave', () => box.classList.remove('hover'));

// マウス移動（座標取得）
box.addEventListener('mousemove', (e) => {
  const rect = box.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  console.log('ボックス内座標:', x, y);
});

// ポインタダウン（クリック開始）
btn.addEventListener('pointerdown', (e) => console.log('押した'));
btn.addEventListener('pointerup', (e) => console.log('離した'));

比較：mouseenter vs mouseover

イベントmouseenter / mouseleavemouseover / mouseout
バブリング❌ しない（対象要素のみ）✅ する（親に伝播）
子要素移動時発火しない子から親に移ると発火
推奨ケース✅ ホバー効果（ほぼこちら）イベント委任が必要な場合

NEWPointer Events（マウス・タッチ・ペン統合API）

pointerdown/up/move はマウス・タッチスクリーン・スタイラスペンを統一的に扱えます。

js
el.addEventListener('pointerdown', (e) => {
  // e.pointerType: "mouse" | "touch" | "pen"
  console.log('入力デバイス:', e.pointerType);
  console.log('筆圧（ペン）:', e.pressure);  // 0〜1

  // タッチのスライドを防止（スクロール抑制など）
  e.target.setPointerCapture(e.pointerId);
});

el.addEventListener('pointermove', (e) => {
  console.log(e.clientX, e.clientY);
});

el.addEventListener('pointerup', (e) => {
  e.target.releasePointerCapture(e.pointerId);
});

jQueryで書くとこうなる

jQueryでは .on() メソッドでイベントをまとめて管理できました。バニラJSでは addEventListener を使うことで同等の処理が可能です。
js
// クリックイベント
$('#btn').on('click', function () {
  console.log('クリックされた');
});

// ホバーイベント（mouseenter / mouseleave）
$('#box').on('mouseenter', function () {
  $(this).addClass('hovered');
});
$('#box').on('mouseleave', function () {
  $(this).removeClass('hovered');
});

// hover() ショートハンド
$('#box').hover(
  function () { $(this).css('background', 'yellow'); },
  function () { $(this).css('background', ''); }
);

// 複数イベントをまとめて登録
$('#btn').on('click mouseenter mouseleave', function (e) {
  console.log(e.type);
});

// イベントの解除
$('#btn').off('click');
💡 上記のデモは、バニラJS（ブラウザ標準API）です。

🤖 AIプロンプトテンプレート

以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。

- addEventListener('click'/'mouseenter'/'mouseleave')を使ったイベント処理のサンプルを示す
- イベントデリゲーションで動的要素のイベントを効率的に管理する例を含める
- ダブルクリック・右クリックのイベントハンドリングのサンプルを含める
- removeEventListenerでイベントリスナーを解除する例を示す
- Pointer Events APIを使ったタッチ・マウス統合処理のサンプルを含める
- コメントは日本語で記述する

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo