我怎样才能覆盖 3 div 以允许点击触发所有底层 div 的事件处理程序?

How can I get 3 divs overlayed to allow click-through that fires all underlying div's event handlers?

我有 3 个 div 像这样叠加:

<div id="div1" style="height: 500px; width: 500px; position:absolute; z-index: 1"></div>
<div id="div2" style="height: 500px; width: 500px; position:absolute; z-index: 2"></div>
<div id="div3" style="height: 500px; width: 500px; position:absolute; z-index: 3"></div>

它们都有 on.click 弹出不同消息的事件处理程序

是否有可能当点击一个时,无论哪个在最上面,它允许所有底层 divs 通过点击(尝试 "pointer events: none" 但禁用所有功能)来触发它们相应的事件处理程序?假设我单击 div 3,div 2 和 3 也触发了它们的事件处理程序。另外,我不想要像这样的硬编码解决方案:

$('#div3').on('click',function() {
   // trigger div 1 and 2 events manually
})

指针事件的问题:none 是无论谁拥有它,都不会像我想要的那样触发它的事件处理程序,有什么办法可以解决这个问题?

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre><code>    $( "#other" ).click(function() {
      $( "#target" ).click();
    });

来源: http://api.jquery.com/click/

我不确定这个解决方案是否太适合你 "hardcoded",但它会检测前面元素后面的任何元素并触发它们的点击处理程序(如果鼠标点击也位于该元素上方)

$('#div3').click(function(e) {
$(this).hide();
var elements = [];
var element;
var count = 0;
element = $(document.elementFromPoint(e.clientX,e.clientY));
while (element.prop("tagName") != "HTML" && count < 15) {
    elements.push(element);
    $(element).hide();
    element = $(document.elementFromPoint(e.clientX,e.clientY));
    count++;
}
$(elements).each(function() {
    $(this).trigger("click");
    $(this).show();
});
$(this).show();
});

Fiddle: http://jsfiddle.net/13jLrarp/3/

count 是为了确保它不会陷入无限循环(以防万一),尽管它在技术上不是必需的

在fiddle中,点击绿色框会使红色框水平增长,点击蓝色框会使红色框垂直增长。单击它们重叠的地方会使红色框双向增长。请注意,使用 z-index 时,红色框位于其他两个上方