Element: mouseleave イベント

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

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

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

mouseenter.png

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

mouseover.png

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

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

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

結果

仕様書

仕様書 状態
UI Events
mouseleave の定義
草案
Document Object Model (DOM) Level 3 Events Specification
mouseleave の定義
廃止された

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mouseleave eventChrome 完全対応 30Edge 完全対応 12Firefox 完全対応 10IE 完全対応 5.5Opera 完全対応 17Safari 完全対応 6.1WebView Android 完全対応 ≤37Chrome Android 完全対応 30Firefox Android 完全対応 10Opera Android 完全対応 18Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 2.0

凡例

完全対応  
完全対応

関連情報