preventDefault(); を使う
親要素へのバブリング（伝達）を保ちながら、aタグのリンク機能を無効化する。
hoge.html
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./hoge.js"></script>
</head>
<body>
<section id="Container">
<div id="Content">
<a href="#">クリックは無効化されるけど、divにhogeクラスが追加される</a>
</div>
</section>
</body>
</html>
hoge.js
$(function(){
$('a').click(function(event){
event.preventDefault();
$("div#Content").addClass("hoge");
});
});
aタグがクリックされた場合でも、
preventDefault メソッドを追加することで、 aタグ自体のリンク機能を無効化しつつ、
その親要素である div#Content へ、 クリックイベントを伝えることが可能。
return false; を使う
親要素へのバブリングとaタグの機能を無効化する。
hoge.html
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./hoge.js"></script>
</head>
<body>
<section id="Container">
<div id="Content">
<a href="#">クリックは無効化されるけど、divにhogeクラスが追加される</a>
</div>
</section>
</body>
</html>
hoge.js
$(function(){
$('a').click(function(){
$("div#Content").addClass("hoge");
return false;
});
});
実際の挙動としては、return false;を返したあと、
aタグ自体のリンク機能を無効化し、
そのクリックイベントを親要素へ伝えない。
hoge.js
$(function(){
$('a').click(function(){
return false;
$("div#Content").addClass("hoge");
});
});
例えば、return false;を addClass メソッドの前に持ってくると、
クリックイベントが親要素に伝わらない。
よって、親要素にhogeクラスが付与されない。
stopPropagation();
バブリングをストップして、aタグリンクの機能は維持する。
hoge.html
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./hoge.js"></script>
</head>
<body>
<section id="Container">
<div id="Content">
<a href="#">クリックは有効化されるけど、divにhogeクラスが追加されない</a>
</div>
</section>
</body>
</html>
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