onmouseleave イベント

DOM イベント MouseEvent

定義と用法

マウス指標が要素から外れたとき、onmouseleave イベントが発生します。

ヒント：このイベントは通常以下と一緒に使用されます： onmouseenter イベント一緒に使用すると、マウス指標が要素に移動したときにイベントが発生します。

ヒント： onmouseleaveイベントは以下に似ています： onmouseout イベント。唯一の違いは、onmouseleaveイベントがバブル（上位のドキュメント階層構造に伝播しません）。ページの下部にさらに多くの例があります。

インスタンス

例1

マウス指標を画像から外れたときにJavaScriptを実行します：

<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">

自分で試してみてください

例2

この例では、onmousemove、onmouseleave、およびonmouseoutイベントの違いを示しています：

<div onmousemove="myMoveFunction()">
  <p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseleave="myLeaveFunction()">
  <p id="demo2">I will demonstrate onmouseleave!</p>
</div>
<div onmouseout="myOutFunction()">
  <p id="demo3">I will demonstrate onmouseout!</p>
</div>

自分で試してみてください

文法

HTMLで：

<element onmouseleave="myScript">

自分で試してみてください

JavaScriptで：

object.onmouseleave = function(){myScript};

自分で試してみてください

JavaScriptでaddEventListener()メソッドを使用する：

object.addEventListener("mouseleave", myScript);

自分で試してみてください

注釈：Internet Explorer 8またはそれ以前のバージョンではサポートされていません addEventListener()メソッド。

技術的詳細

バブル： サポートされていません
キャンセル可能： サポートされていません
イベントタイプ： MouseEvent
サポートされているHTMLタグ： すべてのHTML要素、以下のものを除いて：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>、および<title>
DOMバージョン： レベル2イベント

ブラウザのサポート

このテーブルの数字は、そのイベントを完全にサポートする最初のブラウザバージョンを示しています。

イベント Chrome IE Firefox Safari Opera
onmouseleave 30.0 5.5 サポート 6.1 11.5
DOM イベント MouseEvent