Нажмите на абсолютное позиционированное изображение, которое не пузырится до основного изображения.

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. Обратите внимание, что это приведет к двойному срабатыванию обработчика событий clicked .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.