单击绝对定位的图像不会冒泡到底层图像[关闭]答案

【问题标题】：Click on absolute positioned image does not bubble up to underlying image [closed]单击绝对定位的图像不会冒泡到底层图像[关闭]
【发布时间】：2013-05-24 15:45:43
【问题描述】：

我在另一个图像之上有一个绝对定位的图像。
现在，当我将单击事件绑定到背景中的图像并单击覆盖图像时，单击事件不会按预期冒泡到背景图像。
同时，它确实会进一步上升到底层 div。

<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");
    });
});

jsfiddle 在这里：http://jsfiddle.net/V9dkD/2/

我真的不明白为什么会发生这种情况。
如何在不更改 html 结构的情况下让顶部图片的点击冒泡到背景图片？

【问题讨论】：

事件冒泡到由 html 结构设置的祖先，而不是发生在 CSS 下方的任何位置。但是从覆盖层上的点击处理程序中，您可以调用$("#bg").trigger("click")...
您的图像是兄弟姐妹，而不是父/子。从视觉上看，它们可能处于这种关系中，但在 DOM 中却不是。

标签： javascript jquery events click event-bubbling

【解决方案1】：

您必须trigger 点击另一张图片。对于鼠标事件，重要的是结构而不是位置。

$(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");
    });
});

这是一个分叉的fiddle。请注意，这将导致.container click 事件处理程序触发两次。您可以在 bg 处理程序中使用 return false 来防止这种情况发生。您只需要根据您的实际用例进行一些调整。

【讨论】：

【解决方案2】：

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

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

js 中有两个事件循环 - 捕获和冒泡，当它从根到通过后代到元素并返回时。事件不使用页面上的定位来传播，只有 DOM 结构很重要。

【讨论】：