Question

我在另一张图片的顶部有一张绝对定位的图像现在，当我将单击事件绑定到背景中的图像并单击重叠图像时，单击事件不会按预期冒泡到背景图像。
与此同时，它确实进一步冒泡到底层的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结构的情况下点击顶部图像上的气泡直至背景图片？

Answer 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单击事件处理程序触发两次。您可以使用return false处理程序中的bg来阻止此操作。您只需根据实际使用情况进行一些调整。

Answer 2

您真正需要改变的唯一事情是#overlay

的事件处理程序

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

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

单击绝对定位图像不会冒泡到底层图像

2 个答案: