onmouseleave
イベントハンドラのonmouseleaveについて、サンプルコードを示しながら使い方を説明しています。
onmouseleaveの基本的な使い方
イベントハンドラのonmouseleaveは、要素外にマウスカーソルが移動した時に処理を実行できます。
以下は、利用例です。
<div id="test-leave">
ここの範囲外にマウスを移動させます。
</div>
<script>
const x = document.querySelector("#test-leave");
x.onmouseleave = function(){alert("テストです");};
</script>
赤字部分でmouseleaveイベントを登録しています。
実行例は、以下のとおりです。
要素内にマウスカーソルを移動した後、要素外に移動すると、アラートが表示されます。
画像での利用例
onmouseleaveは、img要素でも使えます。
<img src="199.png" alt="" id="test-leave"> <script> function func1() { x.src = "11.png"; } function func2() { x.src = "199.png"; } const x = document.querySelector("#test-leave"); x.onmouseenter = func1; x.onmouseleave = func2; </script>
11.pngはスペードAの画像で、199.pngはトランプ裏の画像とします。
最初は、トランプ裏の画像が表示されますが、赤字部分により画像内にマウスが移動した時、スペードのAに入れ替わります。onmouseenterは、マウスカーソルが要素内に移動した時をイベントとします。
青字部分は、onmouseleaveにより画像の外にマウスが移動した時、トランプ裏の画像に戻しています。
実行例は、以下のとおりです。
画像内にマウスカーソルがある間だけ、トランプが表になってスペードのAである事ことが確認できます。
子要素への移動
onmouseleaveは、要素の外側へマウスが移動するとイベントとなりますが、子要素(内側の要素)へ移動するとイベントになりません。
<div id="test-leave"> 要素外にマウスを移動させると赤になります。 <img src="11.png" alt="スペードA""> トランプ画像にマウスを移動させても赤になりません。 </div> <script> function func1() { x.style.color = "red"; } const x = document.querySelector("#test-leave"); x.onmouseleave = func1; </script>
divの子要素として、img要素があります。
赤字部分でマウスカーソルが枠内(div内)から外に移動すると、赤色に変わるようにしています。
実行例は、以下のとおりです。なお、5秒程度で戻るように追加で処理を入れています。
枠外に移動させると赤になります。5秒すると元に戻ります。枠内に移動した後、子要素である画像上にマウスに移動させても色が変わりません。このように、onmouseleaveは内側から外側へ移動する時だけイベントにすることができます。
HTMLの属性として記述する(非推奨)
onmouseleaveは、HTMLの属性としても記述できます。
<div onmouseleave="alert('テストです');">
ここの範囲外にマウスを移動させます。
</div>
divタグで、onmouseleave属性によってalertを実行しています。これでも、同じ動作をします。
属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティで記述するか、イベントリスナーを使って記述がお薦めです。
ブラウザのサポート状況
各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。
項目 | IE | Ed | Fx | Ch | Sa | Op |
---|---|---|---|---|---|---|
onmouseleave | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
項目 | Sa | An | Op | Ch | Fx | Sm |
---|---|---|---|---|---|---|
onmouseleave | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
- 〇
- サポート
- △
- 制限あり
- ×
- 未サポート
- ?
- 不明
- IE
- Internet Explorer
- Ed
- Edge
- Fx
- Firefox
- Ch
- Chrome
- Sa
- Safari
- Op
- Opera
- An
- Android Browser
- Sm
- Samsung Internet
※スマートフォンのFirefoxとChromeは、Android版です。
ホームページ作成「onmouseleaveとonmouseoutの違い」
「イベントハンドラ一覧」に戻る