エンジニアのひよこ_level10

【毎日更新!】新卒2年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

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

注意

willow710kut.hatenablog.com

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

何が起こった

<div class="bg">
 <div class="front">
 </div>
</div>
bg {
    width: 100%;
    z-index: 10;
}

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

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

参考サイト

www.tam-tam.co.jp

jQueryの仕様だったのね。

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

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

こうする。

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

return false;をする。

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