在做專案時，常常會用到彈出一個層，然後在這個層上進行操作，操作完成時就關閉彈出層，或者點選別的地方進行關閉層。

通常都會在div樣式中設定z-index的值，比如父層設定z-index:100，子層就設定大於100，起到彈出父層時，子層能夠顯示。

例如（簡單寫一下）：

<div style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 100;height:300px" id="div1" >
 <div style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 101;height:100px" id="div2" >
 </div>
</div>
 

關閉彈出層：$("#div1").hide(); //需要引用jquery.js檔案

我們也可以點選父層其餘的位置進行隱藏父層，只需要在div1上加個事件觸發hide()函式，但是執行起來，發現我點選子層時也觸發了div1的事件，從而關閉彈出層，明顯不是我們需要效果，明明沒有給div2設定事件，為什麼會觸發呢？如何解決？

因為不管你的子級設定多高，都是會觸發父級事件，設定z-index為10000也不行。

解決：

$('#div2').click(function (e) {
            e.stopPropagation();
            return false;
        });