mouseleave/JavaScript

イベントリスナーのmouseleaveについて説明します。

mouseleaveの使い方

 mouseleaveは、要素外にマウスカーソルが移動した時に処理を実行出来ます。

 以下は、例です。

【mouseleave利用例】
<div id="test-leave1">
ここの範囲外にマウスを移動させます。 
</div>

<script>
var x1 = document.getElementById("test-leave1");
x1.addEventListener("mouseleave", function(){x1.style.color = "red";}, false);
</script>

 赤字部分でmouseleaveイベントを登録し、文字を赤色に変えるようにしています。

 実行例は、以下の通りです。尚、分かり易いように枠を付け、広くならないよう幅も指定しています。

ここの範囲外にマウスを移動させます。

 要素内にマウスカーソルを移動した後、要素外に移動すると、文字が赤色に変わります。

画像での利用例

 mouseleaveは<img>でも使えます。

【imgタグでの利用例】
<img src="199.png" alt="トランプ" id="test-leave2" />

<script>
function func1() {
    x2.src = "11.png";
}
function func2() {
    x2.src = "199.png";
}

var x2 = document.getElementById("test-leave2");
x2.addEventListener("mouseenter", func1, false);
x2.addEventListener("mouseleave", func2, false);
</script>

 11.pngはスペードAの画像で、199.pngはトランプ裏の画像とします。

 最初は、トランプ裏の画像が表示されますが、赤字部分により画像内にマウスが移動した時、スペードのAに入れ替わります。mouseenterは、マウスカーソルが要素内に移動した時をイベントとします。

 青字部分は、mouseleaveにより画像の外にマウスが移動した時、トランプ裏の画像に戻しています。

 実行例は、以下の通りです。

トランプ

 画像内にマウスカーソルがある間だけ、トランプが表になってスペードのAである事が確認出来ます。

子要素との関係

 mouseleaveは、要素外へマウスが移動するとイベントとなりますが、子要素へ移動してもイベントになりません。

【子要素がある時のmouseleave】
<div id="test-leave3">
1)範囲外にマウスを移動させると赤になります。
<img src="11.png" alt="スペードA">
2)トランプ画像にマウスを移動させても赤になりません。
</div>

<script>
function func3() {
    x3.style.color = "red";
}

var x3 = document.getElementById("test-leave3");
x3.addEventListener("mouseleave", func3, false);
</script>

 赤字部分でマウスカーソルが枠外に移動すると、赤色に変わるようにしています。

 実行例は、以下の通りです。尚、5秒程度で戻るように追加で処理を入れています。

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

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

サポート

・サポートするブラウザ

 以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

【サポートするブラウザ】
機種 ブラウザ サポート
パソコン Chrome
Safari
Firefox
Microsoft Edge
Internet Explorer v9以上
スマートフォン Chrome
Safari
Firefox

・サポートするタグ

 <br>等を除いた多くのタグでサポートされています。

サイト関連1

onmouseleaveとonmouseoutの違い
※mouseleaveとmouseoutの違いも、基本は同じです。
  • このエントリーをはてなブックマークに追加