Element: mouseleave イベント

mouseleave イベントは、ポインティングデバイス (ふつうはマウス) のカーソルが要素 (Element) の外に移動したときに発行されます。

バブリング なし
キャンセル 不可
インターフェイス MouseEvent
イベントハンドラープロパティ onmouseleave

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

mouseleave イベントの動作

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

mouseout イベントの動作

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

例

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

mouseleave

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

HTML

<div id='mouseTarget'>
 <ul id="unorderedList">
 - No events yet!
 </ul>
</div>

CSS

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

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

JavaScript

var enterEventCount = 0;
var 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) {
  // 与えられたテキストで新しいテキストノードを生成する
  var newTextNode = document.createTextNode(text);

  // 新しい li 要素を生成
  var 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

関連情報