jQueryのclickイベントで親と子が同時に対象になった場合に子だけ取得する方法

jQueryのclickを使って何かがクリックされたら処理をするようなコードを作成したとします。

そのとき、セレクタが親子で同じ場合両方とも処理されてしまいます。

複数取得できた場合は子要素だけ取得したいときの書き方を紹介します。

ちょっとどういう場合か分かりにくいですよね？

次に具体的にどんな場合か紹介します。

jQueryのclickイベントで親子とも取得できる例

こんな書き方することあるか？？ってのは抜きでお願いします。

極端な例ですが div タグをクリックしたら動き出すjQueryの処理があった場合、以下のように書くと子(.inner)をクリックした場合、親(#area1)も処理されてしまいます。

<script type="text/javascript">
$(function(){
	$("div").click(function() {
		alert($(this).html());
	});
});
</script>
<div id="area1" class="area">
	<div class="inner">エリア1</div>
</div>

つまり2回処理が流れるということです。

1回目はポップアップで「エリア1」と表示されます。

2回目はポップアップで「<div class=”inner”>エリア1</div>」と表示されます。

子要素の外側で、親要素の内側をクリックした場合に「<div class=”inner”>エリア1</div>」と出るのは構わないのですが、子要素をクリックした場合は「エリア1」だけを表示したいです。

jQueryのclickイベントで親と子が同時に対象になった場合に子だけ取得する方法

解決策は簡単で、click処理の最後に return false; を追加するだけです。

<script type="text/javascript">
$(function(){
	$("div").click(function() {
		alert($(this).html());
		return false;
	});
});
</script>
<div id="area1" class="area">
	<div class="inner">エリア1</div>
</div>

これで子要素をクリックした場合に、2回目の「<div class=”inner”>エリア1</div>」という表示はなくなります。

試しに作ってみました。

青い部分をクリックしてみてください。

[btn class=”simple”]子だけ取得するサンプル[/btn]

まとめ

jQueryのclickを使う場合、指定したセレクタが親子で同じ場合は両方処理される。

子要素だけ処理したい場合は、return false;を追加する。