Element: mouseout イベント
mouseout
イベントは、ポインティングデバイス (通常はマウス) を使ってカーソルを移動させ、要素やその子の中からカーソルが出たときに、その要素 (Element
) に発行されます。
mouseout
は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("mouseout", (event) => {});
onmouseout = (event) => {};
イベント型
MouseEvent
です。 Event
を継承しています。
イベントプロパティ
親である UIEvent
および Event
から継承したプロパティもあります。
MouseEvent.altKey
読取専用-
このマウスイベントが発行されたときに alt キーが押されていた場合は
true
を返します。 -
このマウスイベントが発行されたときに押されていたボタンの番号です(もしあれば)。
-
このマウスイベントが発行されたときに押されていたボタンです(もしあれば)。
MouseEvent.clientX
読取専用-
マウスポインターのローカル座標(DOM コンテンツ)における X 座標です。
MouseEvent.clientY
読取専用-
マウスポインターのローカル座標(DOM コンテンツ)における Y 座標です。
MouseEvent.ctrlKey
読取専用-
このマウスイベントが発行されたときに control キーが押されていた場合は
true
を返します。 MouseEvent.layerX
Non-standard 読取専用-
このイベントの現在のレイヤーにおける相対の水平座標を返します。
MouseEvent.layerY
Non-standard 読取専用-
このイベントの現在のレイヤーにおける相対の垂直座標を返します。
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.screenX
読取専用-
グローバル(画面)座標におけるマウスポインターの X 座標です。
MouseEvent.screenY
読取専用-
グローバル(画面)座標におけるマウスポインターの Y 座標です。
MouseEvent.shiftKey
読取専用-
このマウスイベントが発行されたときに shift キーが押されていた場合は
true
を返します。 MouseEvent.mozInputSource
Non-standard 読取専用-
イベントを発生させた機器の種類(
MOZ_SOURCE_*
定数のいずれか)。 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます(これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません)。 MouseEvent.webkitForce
Non-standard 読取専用-
クリックしたときに適用された圧力です。
MouseEvent.x
読取専用-
MouseEvent.clientX
の別名です。 MouseEvent.y
読取専用-
MouseEvent.clientY
の別名です。
例
以下の例は mouseout
イベントの使い方を示しています。
mouseout と mouseleave
以下の例は、mouseout
と mouseleave
の各イベントの違いを説明しています。mouseleave
イベントを <ul>
に追加し、マウスが <ul>
を出るたびにリストを紫色に着色するようにします。mouseout
をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。
これを試してみると、mouseout
はそれぞれのリスト項目に配信されるのに対し、 mouseleave
は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある <ul>
を不明瞭にします。
HTML
html
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
JavaScript
js
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,
);
結果
仕様書
Specification |
---|
UI Events # event-type-mouseout |
HTML Standard # handler-onmouseout |
ブラウザーの互換性
BCD tables only load in the browser