mouseoverとmouseenterとhoverを比べてみる

2015.11.29

mouseover/mouseoutとmouseenter/mouseleaveの挙動の違いを比べてみます。

サンプルコード1

要素を入れ子にして、親要素(.parent)にイベントを追加してみます。

HTML

<p>mouseoverとmouseout</p>
<div id="parentA" class="parent">
	<div id="childrenA" class="children"></div>
</div>
<p>mouseenterとmouseleave</p>
<div id="parentB" class="parent">
	<div id="childrenB" class="children"></div>
</div>
<p>hover</p>
<div id="parentC" class="parent">
	<div id="childrenC" class="children"></div>
</div>

JavaScript

$(function() {
	$('#parentA').mouseover(function(e) {
		console.groupCollapsed('#parentAにmouseover');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	}).mouseout(function(e) {
		console.groupCollapsed('#parentAからmouseout');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	});

	$('#parentB').mouseenter(function(e) {
		console.groupCollapsed('#parentBにmouseenter');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	}).mouseleave(function(e) {
		console.groupCollapsed('#parentBからmouseleave');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	});

	$('#parentC').hover(function(e) {
		console.groupCollapsed('#parentCにhover(in)');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	}, function(e) {
		console.groupCollapsed('#parentCからhover(out)');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	});
});

親要素のみにイベントを追加した場合のデモページ
「.parentにオンマウス→.childrenにオンマウス→.childrenからマウスアウト→.parentからマウスアウト」
の順番でカーソルを動かしてみて、各動きでconsoleがどう表示されるか試してみました。
　

サンプルコード1の結果

consoleはそれぞれ以下のように表示されました。

mouseoverとmouseout

// .parentにオンマウスしたとき
#parentAにmouseover
e.target.id : parentA
$(this).attr('id') : parentA

// .childrenにオンマウスしたとき
#parentAからmouseout
e.target.id : parentA
$(this).attr('id') : parentA

#parentAにmouseover
e.target.id : childrenA
$(this).attr('id') : parentA

// .childrenからマウスアウトしたとき
#parentAからmouseout
e.target.id : childrenA
$(this).attr('id') : parentA

#parentAにmouseover
e.target.id : parentA
$(this).attr('id') : parentA

// .parentからマウスアウトしたとき
#parentAからmouseout
e.target.id : parentA
$(this).attr('id') : parentA

.childrenにオンマウスしたときに、.parentにマウスアウトが発生した後、再度.parentにオンマウスイベントが発生しています。
ただし、この時のオンマウスイベントのe.target.idはchildrenAになっています。

.childrenからマウスアウトしたときも同様で、.parentにマウスアウトが発生(e.target.idはchildrenA)した後、再度.parentにオンマウスイベントが発生しています。

mouseenterとmouseleave

// .parentにオンマウスしたとき
#parentBにmouseenter
e.target.id : parentB
$(this).attr('id') : parentB

// .childrenにオンマウスしたとき (consoleの表示なし)

// .childrenからマウスアウトしたとき (consoleの表示なし)

// .parentからマウスアウトしたとき
#parentBからmouseleave
e.target.id : parentB
$(this).attr('id') : parentB

mouseoverとmouseoutのときとは違い、.childrenにオンマウス、マウスアウトしたときは特にイベントは発生していません。

hover

// .parentにオンマウスしたとき
#parentCにhover(in)
e.target.id : parentC
$(this).attr('id') : parentC

// .childrenにオンマウスしたとき (consoleの表示なし)

// .childrenからマウスアウトしたとき (consoleの表示なし)

// .parentからマウスアウトしたとき
#parentCからhover(out)
e.target.id : parentC
$(this).attr('id') : parentC

mouseenterとmouseleaveと挙動は同じになります。
　

サンプルコード2

先ほどのデモに、子要素にも同じイベントを追加してみます。

JavaScript

$(function() {
	$('#parentA').mouseover(function(e) {
		console.groupCollapsed('#parentAにmouseover');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	}).mouseout(function(e) {
		console.groupCollapsed('#parentAからmouseout');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	});
	$('#childrenA').mouseover(function(e) {
		console.groupCollapsed('#childrenAにmouseover');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	}).mouseout(function(e) {
		console.groupCollapsed('#childrenAからmouseout');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	});

	$('#parentB').mouseenter(function(e) {
		console.groupCollapsed('#parentBにmouseenter');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	}).mouseleave(function(e) {
		console.groupCollapsed('#parentBからmouseleave');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	});
	$('#childrenB').mouseenter(function(e) {
		console.groupCollapsed('#childrenBにmouseenter');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	}).mouseleave(function(e) {
		console.groupCollapsed('#childrenBからmouseleave');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	});

	$('#parentC').hover(function(e) {
		console.groupCollapsed('#parentCにhover(in)');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	}, function(e) {
		console.groupCollapsed('#parentCからhover(out)');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	});
	$('#childrenC').hover(function(e) {
		console.groupCollapsed('#childrenCにhover(in)');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	}, function(e) {
		console.groupCollapsed('#childrenCからhover(out)');
		console.log('e.target.id : ' + e.target.id);
		console.log("$(this).attr('id') : " + $(this).attr('id'));
		console.groupEnd();
	});
});

親要素と子要素にイベントを追加した場合のデモページ
先ほどと同じ順番でカーソルを動かしてみて、consoleがどう表示されるか試してみます。
　

サンプルコード2の結果

結果は以下のようになりました。

mouseoverとmouseout

// .parentにオンマウスしたとき
#parentAにmouseover
e.target.id : parentA
$(this).attr('id') : parentA

// .childrenにオンマウスしたとき
#parentAからmouseout
e.target.id : parentA
$(this).attr('id') : parentA

#childrenAにmouseover
e.target.id : childrenA
$(this).attr('id') : childrenA

#parentAにmouseover
e.target.id : childrenA
$(this).attr('id') : parentA

// .childrenからマウスアウトしたとき
#childrenAからmouseout
e.target.id : childrenA
$(this).attr('id') : childrenA

#parentAからmouseout
e.target.id : childrenA
$(this).attr('id') : parentA

#parentAにmouseover
e.target.id : parentA
$(this).attr('id') : parentA

// .parentからマウスアウトしたとき
#parentAからmouseout
e.target.id : parentA
$(this).attr('id') : parentA

mouseenterとmouseleave

// .parentにオンマウスしたとき
#parentBにmouseenter
e.target.id : parentB
$(this).attr('id') : parentB

// .childrenにオンマウスしたとき
#childrenBにmouseenter
e.target.id : childrenB
$(this).attr('id') : childrenB

// .childrenからマウスアウトしたとき
#childrenBからmouseleave
e.target.id : childrenB
$(this).attr('id') : childrenB

// .parentからマウスアウトしたとき
#parentBからmouseleave
e.target.id : parentB
$(this).attr('id') : parentB

hover

// .parentにオンマウスしたとき
#parentCにhover(in)
e.target.id : parentC
$(this).attr('id') : parentC


// .childrenにオンマウスしたとき
#childrenCにhover(in)
e.target.id : childrenC
$(this).attr('id') : childrenC


// .childrenからマウスアウトしたとき
#childrenCからhover(out)
e.target.id : childrenC
$(this).attr('id') : childrenC


// .parentからマウスアウトしたとき
#parentCからhover(out)
e.target.id : parentC
$(this).attr('id') : parentC

　

サンプルコード3

サンプルコード1で、親要素と子要素のサイズが同じ場合を試してみます。
HTML、JavaScriptはサンプルコード1と同じです。

親要素のみにイベントを追加した場合のデモページ2
　

サンプルコード3の結果

結果は以下のようになりました。

mouseoverとmouseout

// .parentにオンマウスしたとき
#parentAにmouseover
e.target.id : childrenA
$(this).attr('id') : parentA

// .parentからマウスアウトしたとき
#parentAからmouseout
e.target.id : childrenA
$(this).attr('id') : parentA

mouseenterとmouseleave

// .parentにオンマウスしたとき
#parentBにmouseenter
e.target.id : childrenB
$(this).attr('id') : parentB

// .parentからマウスアウトしたとき
#parentBからmouseleave
e.target.id : childrenB
$(this).attr('id') : parentB

hover

// .parentにオンマウスしたとき
#parentCにhover(in)
e.target.id : childrenC
$(this).attr('id') : parentC

// .parentからマウスアウトしたとき
#parentCからhover(out)
e.target.id : childrenC
$(this).attr('id') : parentC

　

サンプルコード4

サンプルコード2で、親要素と子要素のサイズが同じ場合を試してみます。

親要素と子要素にイベントを追加した場合のデモページ2
　

サンプルコード4の結果

結果は以下のようになりました。

mouseoverとmouseout

// .parentにオンマウスしたとき
#childrenAにmouseover
e.target.id : childrenA
$(this).attr('id') : childrenA
#parentAにmouseover
e.target.id : childrenA
$(this).attr('id') : parentA

// .parentからマウスアウトしたとき
#childrenAからmouseout
e.target.id : childrenA
$(this).attr('id') : childrenA
#parentAからmouseout
e.target.id : childrenA
$(this).attr('id') : parentA

mouseenterとmouseleave

// .parentにオンマウスしたとき
#childrenBにmouseenter
e.target.id : childrenB
$(this).attr('id') : childrenB
#parentBにmouseenter
e.target.id : childrenB
$(this).attr('id') : parentB

// .parentからマウスアウトしたとき
#childrenBからmouseleave
e.target.id : childrenB
$(this).attr('id') : childrenB
#parentBからmouseleave
e.target.id : childrenB
$(this).attr('id') : parentB

hover

// .parentにオンマウスしたとき
#childrenCにhover(in)
e.target.id : childrenC
$(this).attr('id') : childrenC
#parentCにhover(in)
e.target.id : childrenC
$(this).attr('id') : parentC

// .parentからマウスアウトしたとき
#childrenCからhover(out)
e.target.id : childrenC
$(this).attr('id') : childrenC
#parentCからhover(out)
e.target.id : childrenC
$(this).attr('id') : parentC

　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年11月
日 月 火 水 木 金 土
 12
3456789
10111213141516
17181920212223
24252627282930