Question

我有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事件处理程序，弹出不同的消息

当点击一个时，无论哪一个在顶部，它都可能允许所有底层div通过点击（尝试＆＃34;指针事件：无＆＃34;但禁用所有功能）来激活他们的respective事件处理程序？假设我点击div 3，div 2和3也会点击他们的事件处理程序。此外，我不想要硬编码的解决方案，如：

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

指针事件的问题：无论谁拥有它，不会像我想要的那样触发它的事件处理程序，还有什么方法可以解决这个问题？

Answer 1

我不确定这个解决方案对你来说是否过于“硬编码”，但它会检测到前面元素后面的任何元素并触发它们的点击处理程序（如果鼠标点击也位于该元素上方）

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

小提琴：http://jsfiddle.net/13jLrarp/3/

count是为了确保它不会陷入无限循环（以防万一），尽管技术上并不需要

在小提琴中，单击绿色框将使红色框水平生长，单击蓝色框将使红色框垂直生长。单击它们重叠的位置使红色框双向增长。请注意，使用z-index时，红色框位于另外两个

之上

Answer 2



    $( "#other" ).click(function() {
      $( "#target" ).click();
    });

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

如何获得3个div叠加以允许触发所有底层div事件处理程序的点击？

2 个答案: