為什么點擊事件沒有傳播？

Question

附加了帶有（關閉）（紅色）關閉按鈕（紅色）的標題。 當我單擊關閉按鈕（與標題重疊的區域）時，沒有任何反應。 您能否就該主題的正確解決方案提出建議？

HTML：

<div id="my_body" style="background:rgba(0, 0, 0, 0.6);padding:10px;"> 
    <div id="cls_btn" style="position:absolute;left:0px;top:0px;height:50px;width:50px;background-color:red;">  </div>
    <div id="my_header" style="position:relative;padding:14px 26px 26px">  </div> 
    <div id="pic_area" style="border:2px solid #b3b3b3;margin-top:10px">
        <img id="pic" src="http://never.mind.which.pic.com" >
    </div>
</div>

JS：

$("#cls_btn").bind("click", function() {
    alert("clicked!");

    return true;
});

JSFiddle： http : //jsfiddle.net/JuGx9/

謝謝！

Answer 1

該元素（ <div id="my_header" style="position:relative;padding:14px 26px 26px"> </div> ）似乎占據了相同的空間，並且正在接受click事件，而不是#cls_btn div。 應用值為999的z-index CSS屬性可解決此問題。

工作演示

Answer 2

您的“ my_header”將其覆蓋。 將行更改為：

<div id="my_header" style="position:relative;padding:14px 26px 26px">  </div> 
<div id="cls_btn" style="position:absolute;left:0px;top:0px;height:50px;width:50px;background-color:red;">  </div>

Answer 3

“ my_header” div與“ cls_btn” div重疊。 看這個： http : //jsfiddle.net/JuGx9/13/

要解決此問題而無需更改z-index屬性，請更改div的順序...

http://jsfiddle.net/JuGx9/15/