onmouseleave

イベントハンドラの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要素での利用例】
<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は、要素の外側へマウスが移動するとイベントとなりますが、子要素(内側の要素)へ移動するとイベントになりません。

【子要素がある時の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秒程度で戻るように追加で処理を入れています。

要素外にマウスを移動させると赤になります。 スペードA トランプ画像にマウスを移動させても赤になりません。

枠外に移動させると赤になります。5秒すると元に戻ります。枠内に移動した後、子要素である画像上にマウスに移動させても色が変わりません。このように、onmouseleaveは内側から外側へ移動する時だけイベントにすることができます。

HTMLの属性として記述する(非推奨)

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の違い