注意
以下の方法だと、スクロールイベントなど、デフォルトの動作も止まるので、
それを防ぎたい場合は上の記事をどうぞ。
何が起こった
<div class="bg"> <div class="front"> </div> </div>
bg { width: 100%; z-index: 10; } front { width: 80%; z-index: 11; }
こんな時に、frontをクリックすると、frontもbgも両方クリックイベントが反応した。
裏側にあるはずなのになぜ・・・
参考サイト
jQueryの仕様だったのね。
ってことで、jQueryさん、クリックイベントがどんどん下の階層にも送られるそうです。
それを止めるにはどうするか
こうする。
$('.bg').click(function () { $('.front').hide(); return false; });
return false;
をする。
これで、今はbgクリックしたら、frontが消えるやつ。