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) の外に移動したときに発行されます。

mouseleavemouseout はよく似ていますが、 mouseleave はバブリングしないのに対して mouseout はバブリングするという点が異なります。すなわち mouseleave はポインターがその要素およびすべての子孫を出たときに発行されるのに対し、 mouseout はポインターがその要素またはその要素の子孫のうちの一つを出たときに(ポインターがまだその要素内にあったとしても)発行されます。

構文

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

js
addEventListener("mouseleave", (event) => {});

onmouseleave = (event) => {};

イベント型

MouseEvent です。 Event を継承しています。

Event UIEvent MouseEvent

イベントプロパティ

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

MouseEvent.altKey 読取専用

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

MouseEvent.button 読取専用

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

MouseEvent.buttons 読取専用

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

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.relatedTarget 読取専用

もしあれば、イベントの副ターゲットです。

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 の動作の図

階層内のそれぞれの要素からポインターが出たとき、 mouseleave イベントが一つずつそれぞれの要素に送られます。ここで、ポインターが 4 つの要素の階層にあるテキストから div が表す領域の外に出ると、4 つのイベントが 4 つの要素に送られます。

mouseout イベントの動作

mouseout の動作の図

単一の mouseout イベントが DOM ツリーの最も深い要素に送信され、ハンドラーによって取り消されるかルートに達するまで、上にバブリングしていきます。

mouseout のドキュメントには、 mouseoutmouseleave との違いを説明する例があります。

mouseleave

次の例では mouseenter イベントを使用して、マウスが <div> に割り当てられた空間に入ったときにその境界線を変更しています。次に、 mouseenter イベントまたは mouseleave イベントの番号を指定してリストに項目を追加します。

HTML

html
<div id="mouseTarget">
  <ul id="unorderedList">
    <li>No events yet!</li>
  </ul>
</div>

CSS

<div> がもっと目立つようにスタイル付けします。

css
#mouseTarget {
  box-sizing: border-box;
  width: 15rem;
  border: 1px solid #333;
}

JavaScript

js
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

関連情報