--- title: 'Element: mouseleave イベント' slug: Web/API/Element/mouseleave_event tags: - API - DOM - Element - Event - MouseEvent - Reference - events - mouse - mouseleave - move translation_of: Web/API/Element/mouseleave_event ---

{{APIRef}}

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

バブリング なし
キャンセル 不可
インターフェイス {{domxref("MouseEvent")}}
イベントハンドラープロパティ {{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}

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

mouseenter.png

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

mouseover.png

単一の 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

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);
}

結果

{{EmbedLiveSample('mouseleave')}}

仕様書

仕様書 状態
{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}} {{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}} {{Spec2('DOM3 Events')}}

ブラウザーの互換性

{{Compat("api.Element.mouseleave_event")}}

関連情報