--- title: aタグの無効化 - preventDefaultとreturn falseの違いとか tags: jQuery JavaScript author: kantaro7538 slide: false --- ## `preventDefault();` を使う 親要素へのバブリング(伝達)を保ちながら、`a`タグのリンク機能を無効化する。 ```html:hoge.html
クリックは無効化されるけど、divにhogeクラスが追加される
``` ```javascript:hoge.js $(function(){ $('a').click(function(event){ event.preventDefault(); $("div#Content").addClass("hoge"); }); }); ``` `a`タグがクリックされた場合でも、 `preventDefault` メソッドを追加することで、 **`a`タグ自体のリンク機能を無効化しつつ、** その親要素である `div#Content` へ、 **クリックイベントを伝えることが可能。** ## `return false;` を使う 親要素へのバブリングと`a`タグの機能を無効化する。 ```html:hoge.html
クリックは無効化されるけど、divにhogeクラスが追加される
``` ```javascript:hoge.js $(function(){ $('a').click(function(){ $("div#Content").addClass("hoge"); return false; }); }); ``` 実際の挙動としては、`return false;`を返したあと、 **`a`タグ自体のリンク機能を無効化し、** **そのクリックイベントを親要素へ伝えない。** ```javascript:hoge.js $(function(){ $('a').click(function(){ return false; $("div#Content").addClass("hoge"); }); }); ``` 例えば、`return false;`を `addClass` メソッドの前に持ってくると、 クリックイベントが親要素に伝わらない。 よって、親要素にhogeクラスが付与されない。 ## `stopPropagation();` バブリングをストップして、`a`タグリンクの機能は維持する。 ```html:hoge.html
クリックは有効化されるけど、divにhogeクラスが追加されない
``` ```javascript:hoge.js $(function(){ $('a').click(function(event){ event.stopPropagation(); $("div#Content").addClass("hoge"); }); }); ``` ##参考にしたサイト http://www.tam-tam.co.jp/tipsnote/javascript/post5050.html http://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=3107&rand=ef81c