Javascript 单击绝对定位图像不会向上冒泡到基础图像

我在另一个图像上有一个绝对定位的图像。
现在，当我将单击事件绑定到背景中的图像并单击覆盖图像时，单击事件不会像预期的那样出现在背景图像上。
与此同时，它确实会进一步泡沫化，直至标的部门

<div class="container">
    <img src="http://dummyimage.com/600x400/000/fff&text=Background" id="bg" />
    <img src="http://dummyimage.com/100x100/ff00ff/000000&text=Overlay" id="overlay" />
</div>  



$(function(){
    $("#bg").on("click", function(){
          alert("Click on background"); 
    });   
    $("#overlay").on("click", function(){
          alert("Click on overlay - should bubble to background and container"); 
    });      
    $(".container").on("click", function(){
        alert("Click on either overlay or background which bubbled through to the container");
    });
});

$（函数（）{
$（“#bg”）。在（“单击”，函数（）{
警报（“点击背景”）；
});   
$（“#覆盖”）。在（“单击”，函数（）{
警报（“单击覆盖-应气泡到背景和容器”）；
});      
$（“.container”）。在（“单击”，函数（）{
警报（“单击溢出到容器中的覆盖或背景”）；
});
});

jsfiddle这里：

我真的不明白为什么会发生这种情况。
如何在不更改html结构的情况下使单击顶部图像的气泡上升到背景图像？

您必须单击另一个图像。当涉及到鼠标事件时，重要的是结构而不是位置

$(function(){
    $("#bg").on("click", function(){
          alert("Click on background"); 
    });   
    $("#overlay").on("click", function(){
          alert("Click on overlay - should bubble to background and container");
          $("#bg").trigger('click');
    });      
    $(".container").on("click", function(){
        alert("Click on either overlay or background which bubbled through to the container");
    });
});

---

这是一个叉子。请注意，这将导致

.container

单击事件处理程序触发两次。您可以使用

bg

处理程序中的

returnfalse

来防止这种情况。您只需根据实际使用情况进行一些调整。

您真正需要更改的是#overlay的事件处理程序

---

js中的事件有两个周期-捕获和冒泡，从根到子代再到元素再返回。事件不会使用页面上的定位进行传播，只有DOM结构起作用。

事件会根据html结构设置冒泡到祖先，而不是CSS定位到下面的任何事件。但是从覆盖层上的点击处理程序中，您可以调用

$（“#bg”）.trigger（“点击”）

…您的图像是同级图像，而不是父/子图像。从视觉上看，他们可能处于这种关系中，但在DOM中却不是。

$("#overlay").on("click", function(){  
    alert("Click on overlay - should bubble to background and container"); 
    $('#bg').trigger('click')
});