Element: mouseleave イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
mouseleave
イベントは、ポインティングデバイス(ふつうはマウス)のカーソルが要素 (Element
) の外に移動したときに発行されます。
mouseleave
と mouseout
はよく似ていますが、 mouseleave
はバブリングしないのに対して mouseout
はバブリングするという点が異なります。すなわち mouseleave
はポインターがその要素およびすべての子孫を出たときに発行されるのに対し、 mouseout
はポインターがその要素またはその要素の子孫のうちの一つを出たときに(ポインターがまだその要素内にあったとしても)発行されます。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("mouseleave", (event) => {});
onmouseleave = (event) => {};
イベント型
MouseEvent
です。 Event
を継承しています。
イベントプロパティ
親である UIEvent
および Event
から継承したプロパティもあります。
MouseEvent.altKey
読取専用-
このマウスイベントが発行されたときに alt キーが押されていた場合は
true
を返します。 -
このマウスイベントが発行されたときに押されていたボタンの番号です(もしあれば)。
-
このマウスイベントが発行されたときに押されていたボタンです(もしあれば)。
MouseEvent.clientX
読取専用-
ビューポート座標におけるマウスポインターの X 座標です。
MouseEvent.clientY
読取専用-
ビューポート座標におけるマウスポインターの 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
の別名です。
mouseleave
イベントの動作
階層内のそれぞれの要素からポインターが出たとき、 mouseleave
イベントが一つずつそれぞれの要素に送られます。ここで、ポインターが 4 つの要素の階層にあるテキストから div が表す領域の外に出ると、4 つのイベントが 4 つの要素に送られます。
mouseout
イベントの動作
単一の mouseout
イベントが DOM ツリーの最も深い要素に送信され、ハンドラーによって取り消されるかルートに達するまで、上にバブリングしていきます。
例
mouseout
のドキュメントには、 mouseout
と mouseleave
との違いを説明する例があります。
mouseleave
次の例では mouseenter
イベントを使用して、マウスが <div>
に割り当てられた空間に入ったときにその境界線を変更しています。次に、 mouseenter
イベントまたは mouseleave
イベントの番号を指定してリストに項目を追加します。
HTML
<div id="mouseTarget">
<ul id="unorderedList">
<li>No events yet!</li>
</ul>
</div>
CSS
<div>
がもっと目立つようにスタイル付けします。
#mouseTarget {
box-sizing: border-box;
width: 15rem;
border: 1px solid #333;
}
JavaScript
let enterEventCount = 0;
let leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");
mouseTarget.addEventListener("mouseenter", (e) => {
mouseTarget.style.border = "5px dotted orange";
enterEventCount++;
addListItem(`This is mouseenter event ${enterEventCount}.`);
});
mouseTarget.addEventListener("mouseleave", (e) => {
mouseTarget.style.border = "1px solid #333";
leaveEventCount++;
addListItem(`This is mouseleave event ${leaveEventCount}.`);
});
function addListItem(text) {
// 与えられたテキストで新しいテキストノードを生成する
const newTextNode = document.createTextNode(text);
// 新しい li 要素を生成
const newListItem = document.createElement("li");
// テキストノードを li 要素に追加
newListItem.appendChild(newTextNode);
// 新しく生成されたリスト項目をリストへ追加
unorderedList.appendChild(newListItem);
}
結果
仕様書
Specification |
---|
UI Events # event-type-mouseleave |
HTML Standard # handler-onmouseleave |
ブラウザーの互換性
BCD tables only load in the browser