Element: mouseout イベント

mouseout イベントは、ポインティングデバイス(ふつうはマウス)を使ってカーソルを移動させ、要素やその子の中からカーソルが出たときに、その要素 (Element) に発行されます。

mouseout は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。

構文

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

addEventListener("mouseout", (event) => {});
onmouseout = (event) => {};

イベント型

MouseEvent です。 UIEvent および Event を継承しています。

イベントプロパティ

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

MouseEvent.altKey 読取専用

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

MouseEvent.button 読取専用

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

MouseEvent.buttons 読取専用

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

MouseEvent.clientX 読取専用

ビューポート座標におけるマウスポインターの X 座標です。

MouseEvent.clientY 読取専用

ビューポート座標におけるマウスポインターの 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 の別名です。

例

以下の例は mouseout イベントの使い方を示しています。

mouseout と mouseleave

以下の例は、mouseout と mouseleave の各イベントの違いを説明しています。mouseleave イベントを <ul> に追加し、マウスが <ul> を出るたびにリストを紫色に着色するようにします。mouseout をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。

これを試してみると、mouseout はそれぞれのリスト項目に配信されるのに対し、 mouseleave は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある <ul> を不明瞭にします。

HTML

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

JavaScript

const test = document.getElementById("test");
// マウスが <ul> を出るとリストを一時的に紫色にします
// ときに 1 度だけ実行されます
test.addEventListener(
 "mouseleave",
 (event) => {
 // mouseleave の対象を強調
 event.target.style.color = "purple";
 // 少し待ってから色をリセット
 setTimeout(() => {
 event.target.style.color = "";
 }, 1000);
 },
 false,
);
// マウスが出ると <li> を一時的にオレンジ色にします
test.addEventListener(
 "mouseout",
 (event) => {
 // highlight the mouseout target
 event.target.style.color = "orange";
 // 少し待ってから色をリセット
 setTimeout(() => {
 event.target.style.color = "";
 }, 500);
 },
 false,
);

結果

仕様書

ブラウザーの互換性

関連情報

• 学習: イベント入門
• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseenter
• mouseleave
• contextmenu