我怎样才能覆盖 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();
});
我有 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();
});