【js】mouseover()とmouseover()のバブリングについて

バブリングっていうのがあるということで調べた時の備忘録

バブリングとは

まずは、デモを見た方が早いかも

ソースコードは以下

<div class="parent">
	親です
	<div class="child">子供です</div>
</div>
<script>
jQuery(function($){
	$('.parent').mouseover(function() {
		$(this).animate({fontSize : '25px'}, 500);
	}).mouseout(function() {
		$(this).animate({fontSize : '15px'}, 500);
	});
});
</script>

デモを見てもらってわかるように何回も大きくなったり小さくなったりしているけど、これがイベントバブリングと呼ばれるものみたい
子要素で発生したmouseoverイベントやmouseoutイベントが親要素に伝播してアニメーションが複数回繰り返されているんだと

いまいちよくわからないから自分の言葉で言わせてもらえれば、「子供です」「親です」それぞれにイベントあってそれぞれマウスホバーするとホバーしただけアニメーションが溜まって繰り返されてるみたい
だから「子供です」だけをホバーすれば1回だけアニメーションが行われる

バブリングを止める方法

イベントの伝播を止めるstopPropagation()を使う

$('.child').mouseover(function(e) {
	e.stopPropagation();
}).mouseout(function(e) {
	e.stopPropagation();
});

これを足せば.childへのイベントの電波を止められるので複数回アニメーションが実行されることは無くなる
けど、ホバーアクションのイベントの伝播とめてるのでホバーしても反応しなくなる

似たやつでpreventDefault()ってのがあるけどこれは「画面遷移を止める」ものみたい

参考

DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017

親と子のclickイベントが併発しないようにする