onmouseleaveイベント
イベントオブジェクト例
マウスポインタが要素から離れたときに JavaScript を実行します:
<img onmouseleave="normalImg(this)" src="smiley.gif.html" alt="Smiley">
試してみる »
以下のその他の例で「試してみる」をクリックすると、さらに多くのデモを表示できます。
定義と用法
onmouseleave イベントは、マウスが要素から離れたときに発生します。
ヒント：このイベントは通常、onmouseenterイベントと一緒に使用され、このイベントはマウスが要素上に移動したときに発生します。
ヒント:onmouseleave イベントはonmouseoutイベントに似ています。唯一の違いは、onmouseleave イベントがバブリングをサポートしないことです。
ブラウザサポート
表内の数字は、そのイベントをサポートする最初のブラウザのバージョン番号を示しています。
| イベント | |||||
|---|---|---|---|---|---|
| onmouseleave | 30.0 | 5.5 | Yes | 6.1 | 11.5 |
構文
HTML の場合:
<element onmouseleave="myScript">試してみる
JavaScript の場合:
object.onmouseleave=function(){myScript};試してみる
JavaScript で addEventListener() メソッドを使用する場合:
object.addEventListener("mouseleave", myScript);試してみる
注意：Internet Explorer 8 およびそれ以前の IE バージョンはaddEventListener()メソッドをサポートしていません。
技術詳細
| バブリングをサポートするか: | No |
|---|---|
| キャンセルできるか: | No |
| イベントタイプ: | MouseEvent |
| サポートされる HTML タグ: | <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title> を除くすべての HTML 要素 |
その他の例
例
この例では、onmousemove、onmouseleave、onmouseout イベントの違いを示します:
<div onmousemove="myMoveFunction()">
<p id="demo">我将演示 onmousemove!</p>
</div>
<div onmouseleave="myLeaveFunction()">
<p id="demo2">我将演示 onmouseleave!</p>
</div>
<div onmouseout="myOutFunction()">
<p id="demo3">我将演示 onmouseout!</p>
</div>
<p id="demo">我将演示 onmousemove!</p>
</div>
<div onmouseleave="myLeaveFunction()">
<p id="demo2">我将演示 onmouseleave!</p>
</div>
<div onmouseout="myOutFunction()">
<p id="demo3">我将演示 onmouseout!</p>
</div>
試してみる »