クリックイベントのサンプル
.innerを子、.outerを親にしてそれぞれにクリックイベントのサンプルを作成した。リンクをクリックするとalertの".inner", ".outer"が表示されてからiwb.jpに遷移する。
$(".inner").click(function(){ alert(".inner"); }); $(".outer").click(function(){ alert(".outer"); });
alertの".inner", ".outer"が表示されてからiwb.jpに遷移するサンプル
preventDefault()
preventDefault()を使用するとリンクの遷移などのイベントを無効にできる。
$(".inner").click(function(e){ e.preventDefault(); alert(".inner"); }); $(".outer").click(function(){ alert(".outer"); });
stopPropagation()
stopPropagation()を使用するとイベント伝播をキャンセルできる。alertの".inner"は表示されるが".outer"は表示されない。リンク遷移は有効。
$(".inner").click(function(e){ e.stopPropagation(); alert(".inner"); }); $(".outer").click(function(){ alert(".outer"); });
preventDefault()+stopPropagation()
preventDefault()とstopPropagation()は併用可能。この場合alertで".inner"は表示されるが".outer"は表示されずリンクの遷移も発生しない。
$(".inner").click(function(e){ e.preventDefault(); e.stopPropagation(); alert(".inner"); }); $(".outer").click(function(){ alert(".outer"); });
preventDefault()+stopPropagation()のサンプル
return false
return falseはそれが記述された箇所を読み込んだ時点で以降の処理がすべてなくなる。イベント伝播(バブリング)も発生しない。よって.innerをクリックした場合は".inner"と".outer"の両方が表示されずリンクの遷移も発生しない。
$(".inner").click(function(){ return false; alert(".inner"); }); $(".outer").click(function(){ alert(".outer"); });