デモページはこちら

jQueryのイベントオブジェクトのメソッドであるpreventDefaultとstopPropagationの動作をテストします。また、処理を抜けるreturnやreturn falseとの違いを確認します。

以下のhtmlの構造でテストします。クラス名box01～box06のdivタグが親要素、クラス名link01～link06のaタグが子要素の構造です。

<div class="hover_image_wrap">
	<div class="hover_image">
		<div class="box01">
			<a href="https://tech.brick-plan.jp/category/fade/" class="link01">
				<img src="images/img01.jpg" alt="">
			</a>
		</div>
		<p class="caption_txt">無効化処理なし</p>
	</div>
	<div class="hover_image">
		<div class="box02">
			<a href="https://tech.brick-plan.jp/category/tab/" class="link02">
				<img src="images/img02.jpg" alt="">
			</a>
		</div>
		<p class="caption_txt">aタグのclickイベントでpreventDefault</p>
	</div>
	<div class="hover_image">
		<div class="box03">
			<a href="https://tech.brick-plan.jp/category/fade/" class="link03">
				<img src="images/img01.jpg" alt="">
			</a>
		</div>
		<p class="caption_txt">aタグのclickイベントでstopPropagation</p>
	</div>
	<div class="hover_image">
		<div class="box04">
			<a href="https://tech.brick-plan.jp/category/tab/" class="link04">
				<img src="images/img02.jpg" alt="">
			</a>
		</div>
		<p class="caption_txt">aタグのclickイベントでpreventDefault、stopPropagation</p>
	</div>
	<div class="hover_image">
		<div class="box05">
			<a href="https://tech.brick-plan.jp/category/fade/" class="link05">
				<img src="images/img01.jpg" alt="">
			</a>
		</div>
		<p class="caption_txt">aタグのclickイベントでreturn</p>
	</div>
	<div class="hover_image">
		<div class="box06">
			<a href="https://tech.brick-plan.jp/category/tab/" class="link06">
				<img src="images/img02.jpg" alt="">
			</a>
		</div>
		<p class="caption_txt">aタグのclickイベントでreturn false</p>
	</div>
</div>

全てaタグのclickイベント時の動作です。
無効化処理なしの場合、alertでlink01の表示、子要素から親要素へクリックイベントが伝播（バブリング）されalertでbox01の表示、リンク先へ遷移となります。
aタグのclickイベントでpreventDefaultを指定した場合、alertでlink02の表示、alertでbox02の表示となります。ブラウザの機能であるリンク遷移のイベントは無効になりますが、preventDefault以降の処理とバブリングは有効です。
aタグのclickイベントでstopPropagationを指定した場合、alertでlink03の表示、リンク先へ遷移となります。バブリングのみ無効になるため、alertでbox03は表示されません。
aタグのclickイベントでpreventDefault、stopPropagationを指定した場合、alertでlink04の表示となります。return falseと似ていますが処理を抜ける訳ではないため、aタグのclickイベント内の処理は実行されます。
aタグのclickイベントでreturnを指定した場合、alertでbox05の表示、リンク先へ遷移となります。aタグのclickイベント内の処理を抜けるため、alertでlink05は表示されませんが、バブリングとリンク遷移は有効です。
aタグのclickイベントでreturn falseを指定した場合、alertの表示もリンク先への遷移も発生しません。全ての処理を抜けるためバブリングは発生せず、リンク遷移のイベントも無効になります。

$(function() {
	//無効化処理なし
	$('.link01').on('click',function(e) {
		alert('link01');
	});
	$('.box01').on('click',function(e) {
		alert('box01');
	});
	//aタグのclickイベントでpreventDefault
	$('.link02').on('click',function(e) {
		e.preventDefault();
		alert('link02');
	});
	$('.box02').on('click',function(e) {
		alert('box02');
	});
	//aタグのclickイベントでstopPropagation
	$('.link03').on('click',function(e) {
		e.stopPropagation();
		alert('link03');
	});
	$('.box03').on('click',function(e) {
		alert('box03');
	});
	//aタグのclickイベントでpreventDefault、stopPropagation
	$('.link04').on('click',function(e) {
		e.preventDefault();
		e.stopPropagation();
		alert('link04');
	});
	$('.box04').on('click',function(e) {
		alert('box04');
	});
	//aタグのclickイベントでreturn
	$('.link05').on('click',function(e) {
		return;
		alert('link05');
	});
	$('.box05').on('click',function(e) {
		alert('box05');
	});
	//aタグのclickイベントでreturn false
	$('.link06').on('click',function(e) {
		return false;
		alert('link06');
	});
	$('.box06').on('click',function(e) {
		alert('box06');
	});
});