return false;とpreventDefault();とstopPropagation();の違い

return false;、preventDefault();、stopPropagation();それぞれの違いを見てみます。

何も設定していない場合

親要素と子要素それぞれに、クリックでアラートを出す処理を追加してみます。

HTML

<div id="parent">
	<a href="https://www.google.co.jp/" id="children">ここをクリック</a>
</div>

JavaScript

$(function() {
	$('#parent').on('click', function() {
		alert('parent');
	});
	$('#children').on('click', function() {
		alert('children');
	});
});

何も設定していない場合のデモページ
children→parentの順でアラートが表示され、ページ遷移します。
この子から親にイベントが伝わることをバブリングといい、今回比較する3つはバブリングをどうしたいかで使い分けます。
　

return false;

childrenにreturn false;を設定してみます。

JavaScript

$(function() {
	$('#parent').on('click', function() {
		alert('parent');
	});
	$('#children').on('click', function() {
		alert('children');
		return false;
	});
});

この場合、childrenのアラートが表示されますが、parentのアラートとページ遷移は発生しません。
return false;のデモページ
　

preventDefault();

childrenにpreventDefault();を設定してみます。

JavaScript

$(function() {
	$('#parent').on('click', function() {
		alert('parent');
	});
	$('#children').on('click', function(e) {
		alert('children');
		e.preventDefault();
	});
});

この場合、children→parentの順でアラートが表示されますが、ページ遷移は発生しません。
preventDefault();のデモページ
　

children内にさらに子要素を追加して、preventDefault();を設定してみます。

HTML

<div id="parent">
	<a href="https://www.google.co.jp/" id="children">
		<span id="children2">ここをクリック</span>
	</a>
</div>

JavaScript

$(function() {
	$('#parent').on('click', function() {
		alert('parent');
	});
	$('#children').on('click', function(e) {
		alert('children');
	});
	$('#children2').on('click', function(e) {
		alert('children2');
		e.preventDefault();
	});
});

この場合、children2→children→parentの順でアラートが表示されますが、childrenのページ遷移は発生しません。
preventDefault();のデモページ2
　

stopPropagation();

childrenにstopPropagation();を設定してみます。

JavaScript

$(function() {
	$('#parent').on('click', function() {
		alert('parent');
	});
	$('#children').on('click', function(e) {
		alert('children');
		e.stopPropagation();
	});
});

この場合、childrenのアラートが表示されてページ遷移しますが、parentのアラートは発生しません。
stopPropagation();のデモページ
　

まとめると以下のような使い分けになります。

【参考サイト】

• ふじこのプログラミング奮闘記
• 1分でわかるreturn false; preventDefault(); stopPropagation() の違い | iwb.jp