单击事件未传播的原因

Why click event is not propagating?

本文关键字：传播 事件 单击      更新时间：2023-09-26

附加一个带有（有点）关闭按钮（红色）moc-up的Header。当我点击关闭按钮（与页眉重叠的区域）时，什么也没发生。你能就这个问题的正确解决方案提出建议吗？

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/

谢谢！

此元素（<div id="my_header" style="position:relative;padding:14px 26px 26px"> </div>）似乎占用了相同的空间，并接受单击事件，而不是#cls_btndiv。应用值为999的z-index CSS属性可以解决此问题。

工作演示

您的"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>

"my_header"div与"cls_btn"div重叠http://jsfiddle.net/JuGx9/13/

要在不使用z-index属性的情况下解决此问题，请更改div的顺序。。。

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

相关文章：