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>  <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