mouseleave

イベントリスナーのmouseleaveについて、サンプルコードを示しながら使い方を説明しています。

mouseleaveの基本的な使い方

イベントリスナーのmouseleaveは、要素外にマウスカーソルが移動した時に処理を実行できます。

以下は、利用例です。

【mouseleave利用例】

<div id="test-leave">
ここの範囲外にマウスを移動させます。 
</div>

<script>
const x = document.querySelector("#test-leave");
x.addEventListener("mouseleave", function(){alert("テストです");});
</script>

赤字部分でmouseleaveイベントを登録しています。

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

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

要素内にマウスカーソルを移動した後、要素外に移動すると、アラートが表示されます。

画像での利用例

mouseleaveは、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.addEventListener("mouseenter", func1);
x.addEventListener("mouseleave", func2);
</script>

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

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

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

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

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

子要素への移動

mouseleaveは、要素の外側へマウスが移動するとイベントとなりますが、子要素(内側の要素)へ移動するとイベントになりません。

【子要素がある時のmouseleave利用例】

<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.addEventListener("mouseleave", func1);
</script>

divの子要素として、img要素があります。

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

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

要素外にマウスを移動させると赤になります。スペードA

トランプ画像にマウスを移動させても赤になりません。