爲什麼點擊事件不會傳播？

附上一個標題（有點）關閉按鈕（紅色）moc-up。當我點擊關閉按鈕（與標題重疊的區域）時 - 沒有任何反應。你能否就正確的解決方案請求建議？爲什麼點擊事件不會傳播？

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/

謝謝！

來源

2012-02-06 BreakPhreak

你 '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>

來源

2012-02-06 12:54:03 Hadas

爲什麼行順序很重要？ – BreakPhreak 2012-02-06 12:58:47

我的意思是，*正確的*元素順序 - 它可以在瀏覽器中100％移植嗎？ – BreakPhreak 2012-02-06 13:00:19

如果您點擊事件觸發的頂部。當另一個div覆蓋按鈕時，您不要點擊該按鈕，而是在第二個div上。所以當我更改行時，按鈕是第二個div上方，它可以得到您的點擊。您也可以將'my_header'移動到右側，以便它不會覆蓋按鈕，它將起作用。 – Hadas 2012-02-06 13:04:32

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

Working DEMO

來源

2012-02-06 12:53:25

謝謝！沒有任何方法可以在沒有'z-index'幫助的情況下解決它。 *只是好奇*。 – BreakPhreak 2012-02-06 12:58:30

的「my_header」分區被重疊「cls_btn」分區。看看這個：http://jsfiddle.net/JuGx9/13/

爲了解決這個不具備z-index屬性改變的div ...的順序

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

來源

2012-02-06 12:58:40

爲什麼點擊事件不會傳播？

回答

相關問題