z-indexで重ねたウィンドウをクリックすると、全部反応してしまう【131日目】

注意

以下の方法だと、スクロールイベントなど、デフォルトの動作も止まるので、
それを防ぎたい場合は上の記事をどうぞ。

<div class="bg">
 <div class="front">
 </div>
</div>

bg {
    width: 100%;
    z-index: 10;
}

front {
    width: 80%;
    z-index: 11;
}

こんな時に、frontをクリックすると、frontもbgも両方クリックイベントが反応した。
裏側にあるはずなのになぜ・・・

ってことで、jQueryさん、クリックイベントがどんどん下の階層にも送られるそうです。

それを止めるにはどうするか

        $('.bg').click(function () {
                $('.front').hide();
                return false;
        });

return false;をする。

これで、今はbgクリックしたら、frontが消えるやつ。