メモ

preventDefault()実行時のaタグhrefの挙動メモ

なんか気になったので個人的なメモ。

jQueryでイベント制御を行う際に、ブラウザのデフォルトの動作を無効にしたい時ってありますよね？
そんな時使用するのが preventDefault()関数なんですが、aタグ使用時の挙動が色々謎だったので整理したいと思います。

というかpreventDefault()関数って何？

例えば、サイトトップへみたいなリンクがあったとして、
これをこのままクリックしちゃうとページ上部にとんじゃうわけですよ。
アニメーションをいれてページ上部まで戻りたいっていう機能要求だったとすると、この動作を無効しなくちゃならないですよね？
そんな時に便利なのがこの preventDefault() です！
本来 Id=”body”までジャンプするはずの挙動を無かったことにできるのです。

使い方

1
2
3
$('a.link').on('click', function(e) {
    e.preventDefault();
});

検証の前の予備知識

今回の検証を行うにあたってバブリングという現象を解説します。

1
2
3
4
5
6
7
8
9
10
<div class="parent-link">
    <div class="child-link">リンク</div>
</div>

$('.parent-link').on('click', function(e){
    console.log('parent');
});
$('.child-link').on('click', function(e){
    console.log('child');
});

実行結果：

1
2
child
parent

このように子要素の.child-linkが先に実行され、その親要素である.parent-linkが後から実行される、この現象をバブリングといいます。
※下（子要素）から上（親要素）に伝播してく様が泡みたいだからバブリングというそうな

このバブリングだけを止めたいという場合は、stopPropagation()関数を使います。（今回はふれません）

検証

今回の検証内容はaタグのイベント無効時にバブリングがどう作用するかというものです。

検証1: aタグは本当に無効になるのか！？

動作検証

以下をクリック

リンク 
1
2
3
4
5
<a class="link" href="http://kuniiskywalker.github.io/">リンク</a>

$('.link').on('click', function(e){
    e.preventDefault();
});

結果：　無効

とりあえず、基本的なところから動作確認。無効になります。

検証2: 親要素のaタグを無効にした場合小要素のイベントは発火するのか！？

動作検証

以下をクリック

リンク
 
1
2
3
4
5
6
7
8
9
10
<a class="parent-link" href="http://kuniiskywalker.github.io/">
    <div class="child-link" style="background-color: #FFFF00;">リンク</div>
</a>

$('.parent-link').on('click', function(e){
    e.preventDefault();
});
$('.child-link').on('click', function(e){
    alert('child');
});

実行結果：

1
child

結果：　する

子要素からイベントが伝播してくるのだから当たり前といえば当たり前ですね。

検証3: バブリング時の影響範囲は！？

動作検証

以下をクリック

リンク
 
1
2
3
4
5
6
7
<a class="parent-link" href="http://kuniiskywalker.github.io/">
    <div class="child-link">リンク</div>
</a>

$('.child-link').on('click', function(e){
    e.preventDefault();
});

実行結果：　

この結果だけ予想と違いました。preventDefault()関数はバブリングを許可するはずなのになぜか、親要素のaタグが実行されない。。。

結果：　バブルしない

考察

検証項目は徐々に増やしていきますが、とりあえずこんな感じで。