Element: mouseenter イベント

mouseenter イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発生した要素の中に移動したときに Element に発生します。

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

使用上の注意

mouseentermouseover と似ていますが、バブリングしない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。

mouseenter.png
要素の階層に入った場合、それぞれの要素に1つずつ mouseenter が送信されます。ここでポインターがテキストに達した時、階層の4つの要素に4つのイベントが送信されます。
mouseover.png
DOM ツリーの最も深い要素に1つの mouseover イベントが送信され、ハンドラーによってキャンセルされるかルートに達するまで階層を上にバブリングします。

深い階層では、数多くの mouseenter イベントが送信され、とても重くなり、著しい性能の問題を引き起こすことがあります。このような場合は mouseover イベントを待ち受けした方が優れています。

対応する (マウスがコンテンツ領域から出たときに要素に発生する) mouseleave と組み合わせると、 mouseenter イベントは CSS の :hover 疑似クラスととても似た方法で動作します。

mouseover のドキュメントには、 mouseovermouseenter の間の違いを説明する例があります。

mouseenter

以下は端的な例ですが、 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
mouseenter の定義
草案
Document Object Model (DOM) Level 3 Events Specification
mouseenter の定義
廃止された

ブラウザーの対応

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

凡例

完全対応  
完全対応

関連情報