stopPropagation()が効かない時のメモ

ナビゲーションのプルダウンなどでよくある2階層の形で、親と子のclickイベントが併発しないようにする場合、stopPropagation()を使用します。

【HTML】
<ul class="wrapper">
	<li class="list">
		<ul class="inner">
			<li>インナー</li>
		</ul>
	</li>
	<li></li>
	<li></li>
</ul>

【jQuery】
$('.wrapper li').on('click', function() {
	alert('プルダウンを行う');
});

$('.inner').on('click', function() {
	e.stopPropagation();
	alert('何もしない');
});

これだと効かないので、親要素のセレクターを下記のようにします。

【jQuery】
$('.list').on('click', function() {
	alert('プルダウンを行う');
});

$('.inner').on('click', function() {
	e.stopPropagation();
	alert('何もしない');
});