Skip to content

Latest commit

 

History

History
157 lines (127 loc) · 7.09 KB

index.md

File metadata and controls

157 lines (127 loc) · 7.09 KB
Raw
title short-title slug l10n
Element: mouseover イベント
mouseover
Web/API/Element/mouseover_event
sourceCommit
b965392d6e4f2c897e914a3b69dec3e2a4212782

{{APIRef}}

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

構文

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

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

onmouseover = (event) => {};

イベント型

{{domxref("MouseEvent")}} です。 {{domxref("Event")}} を継承しています。

{{InheritanceDiagram("MouseEvent")}}

イベントプロパティ

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

  • {{domxref("MouseEvent.altKey")}} {{ReadOnlyInline}}
    • : このマウスイベントが発行されたときに alt キーが押されていた場合は true を返します。
  • {{domxref("MouseEvent.button")}} {{ReadOnlyInline}}
    • : このマウスイベントが発行されたときに押されていたボタンの番号です（もしあれば）。
  • {{domxref("MouseEvent.buttons")}} {{ReadOnlyInline}}
    • : このマウスイベントが発行されたときに押されていたボタンです（もしあれば）。
  • {{domxref("MouseEvent.clientX")}} {{ReadOnlyInline}}
  • {{domxref("MouseEvent.clientY")}} {{ReadOnlyInline}}
  • {{domxref("MouseEvent.ctrlKey")}} {{ReadOnlyInline}}
    • : このマウスイベントが発行されたときに control キーが押されていた場合は true を返します。
  • {{domxref("MouseEvent.layerX")}} {{Non-standard_inline}} {{ReadOnlyInline}}
    • : このイベントの現在のレイヤーにおける相対の水平座標を返します。
  • {{domxref("MouseEvent.layerY")}} {{Non-standard_inline}} {{ReadOnlyInline}}
    • : このイベントの現在のレイヤーにおける相対の垂直座標を返します。
  • {{domxref("MouseEvent.metaKey")}} {{ReadOnlyInline}}
    • : このマウスイベントが発行されたときに meta キーが押されていた場合は true を返します。
  • {{domxref("MouseEvent.movementX")}} {{ReadOnlyInline}}
    • : 前回の {{domxref("Element/mousemove_event", "mousemove")}} イベントの位置から相対的なマウスポインターの X 座標です。
  • {{domxref("MouseEvent.movementY")}} {{ReadOnlyInline}}
    • : 前回の {{domxref("Element/mousemove_event", "mousemove")}} イベントの位置から相対的なマウスポインターの Y 座標です。
  • {{domxref("MouseEvent.offsetX")}} {{ReadOnlyInline}}
    • : 対象ノードのパディング辺からの相対的なマウスポインターの X 座標です。
  • {{domxref("MouseEvent.offsetY")}} {{ReadOnlyInline}}
    • : 対象ノードのパディング辺からの相対的なマウスポインターの Y 座標です。
  • {{domxref("MouseEvent.pageX")}} {{ReadOnlyInline}}
    • : 文書全体からの相対的なマウスポインターの X 座標です。
  • {{domxref("MouseEvent.pageY")}} {{ReadOnlyInline}}
    • : 文書全体からの相対的なマウスポインターの Y 座標です。
  • {{domxref("MouseEvent.relatedTarget")}} {{ReadOnlyInline}}
    • : もしあれば、イベントの副ターゲットです。
  • {{domxref("MouseEvent.screenX")}} {{ReadOnlyInline}}
  • {{domxref("MouseEvent.screenY")}} {{ReadOnlyInline}}
  • {{domxref("MouseEvent.shiftKey")}} {{ReadOnlyInline}}
    • : このマウスイベントが発行されたときに shift キーが押されていた場合は true を返します。
  • {{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{ReadOnlyInline}}
    • : イベントを発生させた機器の種類（MOZ_SOURCE_* 定数のいずれか）。 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます（これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません）。
  • {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{ReadOnlyInline}}
    • : クリックしたときに適用された圧力です。
  • {{domxref("MouseEvent.x")}} {{ReadOnlyInline}}
    • : {{domxref("MouseEvent.clientX")}} の別名です。
  • {{domxref("MouseEvent.y")}} {{ReadOnlyInline}}
    • : {{domxref("MouseEvent.clientY")}} の別名です。

例

以下の例は、mouseover と {{domxref("Element/mouseenter_event", "mouseenter")}} の各イベントの違いを説明しています。

HTML

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

JavaScript

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

結果

{{EmbedLiveSample('Examples')}}

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

  • イベントの紹介
  • {{domxref("Element/mousedown_event", "mousedown")}}
  • {{domxref("Element/mouseup_event", "mouseup")}}
  • {{domxref("Element/mousemove_event", "mousemove")}}
  • {{domxref("Element/click_event", "click")}}
  • {{domxref("Element/dblclick_event", "dblclick")}}
  • {{domxref("Element/mouseover_event", "mouseover")}}
  • {{domxref("Element/mouseout_event", "mouseout")}}
  • {{domxref("Element/mouseenter_event", "mouseenter")}}
  • {{domxref("Element/mouseleave_event", "mouseleave")}}
  • {{domxref("Element/contextmenu_event", "contextmenu")}}