z-index層重疊事件順序以及解決辦法
阿新 • • 發佈:2019-01-04
在做專案時,常常會用到彈出一個層,然後在這個層上進行操作,操作完成時就關閉彈出層,或者點選別的地方進行關閉層。
通常都會在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上也加個事件,用"e.stopPropagation();"進行阻止冒泡,這樣就不會觸發div1事件。$('#div2').click(function (e) { e.stopPropagation(); return false; });