Element: mouseover イベント

mouseover イベントは、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに、その要素 (Element) に発行されます。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js

addEventListener("mouseover", (event) => {});

onmouseover = (event) => {};

イベント型

MouseEvent です。 Event を継承しています。

Event UIEvent MouseEvent

イベントプロパティ

親である UIEvent および Event から継承したプロパティもあります。

MouseEvent.altKey 読取専用

このマウスイベントが発行されたときに alt キーが押されていた場合は true を返します。

MouseEvent.button 読取専用

このマウスイベントが発行されたときに押されていたボタンの番号です（もしあれば）。

MouseEvent.buttons 読取専用

このマウスイベントが発行されたときに押されていたボタンです（もしあれば）。

MouseEvent.clientX 読取専用

マウスポインターのローカル座標（DOM コンテンツ）における X 座標です。

MouseEvent.clientY 読取専用

マウスポインターのローカル座標（DOM コンテンツ）における Y 座標です。

MouseEvent.ctrlKey 読取専用

このマウスイベントが発行されたときに control キーが押されていた場合は true を返します。

MouseEvent.layerX 読取専用

このイベントの現在のレイヤーにおける相対の水平座標を返します。

MouseEvent.layerY 読取専用

このイベントの現在のレイヤーにおける相対の垂直座標を返します。

MouseEvent.metaKey 読取専用

このマウスイベントが発行されたときに meta キーが押されていた場合は true を返します。

MouseEvent.movementX 読取専用

前回の mousemove イベントの位置から相対的なマウスポインターの X 座標です。

MouseEvent.movementY 読取専用

前回の mousemove イベントの位置から相対的なマウスポインターの Y 座標です。

MouseEvent.offsetX 読取専用

対象ノードのパディング辺からの相対的なマウスポインターの X 座標です。

MouseEvent.offsetY 読取専用

対象ノードのパディング辺からの相対的なマウスポインターの Y 座標です。

MouseEvent.pageX 読取専用

文書全体からの相対的なマウスポインターの X 座標です。

MouseEvent.pageY 読取専用

文書全体からの相対的なマウスポインターの Y 座標です。

MouseEvent.relatedTarget 読取専用

もしあれば、イベントの副ターゲットです。

MouseEvent.screenX 読取専用

グローバル（画面）座標におけるマウスポインターの X 座標です。

MouseEvent.screenY 読取専用

グローバル（画面）座標におけるマウスポインターの Y 座標です。

MouseEvent.shiftKey 読取専用

このマウスイベントが発行されたときに shift キーが押されていた場合は true を返します。

MouseEvent.mozInputSource 読取専用

イベントを発生させた機器の種類（MOZ_SOURCE_* 定数のいずれか）。 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます（これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません）。

MouseEvent.webkitForce 読取専用

クリックしたときに適用された圧力です。

MouseEvent.x 読取専用

MouseEvent.clientX の別名です。

MouseEvent.y 読取専用

MouseEvent.clientY の別名です。

例

以下の例は、mouseover と mouseenter の各イベントの違いを説明しています。

HTML

html

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

JavaScript

js

let test = document.getElementById("test");

// このハンドラーは、カーソルが順序なしリストの上を移動した
// ときに1度だけ実行されます
test.addEventListener(
  "mouseenter",
  (event) => {
    // highlight the mouseenter target
    event.target.style.color = "purple";

    // 少し待ってから色をリセット
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);

// このハンドラーは異なるリスト項目の上を移動するごとに
// 実行されます
test.addEventListener(
  "mouseover",
  (event) => {
    // mouseover の対象を強調
    event.target.style.color = "orange";

    // 少し待ってから色をリセット
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);

結果

仕様書

Specification
UI Events
# event-type-mouseover
HTML Standard
# handler-onmouseover

ブラウザーの互換性

BCD tables only load in the browser

関連情報