javascript - 是否可以同时点击 div1 和 div2，而 div2 正在叠加？

Question

我想知道是否可以同时点击两个 div，即使一个在另一个之后。

如果我单击红色 div，那么绿色也会被激活。我在这里做了一个例子:https://jsfiddle.net/ow67aaz1/1/

<div class="full">
  <div class="box">
    <div class="one"></div>  
    <div class="two"></div>
  </div>
</div>

$(".one").click(function() {
    alert('green Clicked');
});

<style>
.full { background: #ddd; width:300px; height: 300px; margin: 0 auto;}

.box {position: relative;}
.one {background: green; width: 50px; height: 50px; position: absolute;}
.two {background: red; width: 30px; height: 30px; position: absolute;}

<style>

我尝试了以下但无法弄清楚如何让它触发..

$('.two').click(function()
{
    $('.one').trigger('click');

});

Answer 1

你只需要触发第二个div的click事件

$(".one").click(function() {
  alert('green Clicked');
  $(".two").trigger("click");
});
$(".two").click(function() {
  alert('red Clicked');
  
});

.full { background: #ddd; width:300px; height: 300px; margin: 0 auto;}

.box {position: relative;}
.one {background: green; width: 50px; height: 50px; position: absolute;z-index:1}
.two {background: red; width: 50px; height: 50px; position: absolute; z-index:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full">
  <div class="box">
    <div class="one"></div>  
    <div class="two"></div>
  </div>
</div>

更新

再次运行 snippet，red div 不可见，但它一直在clicking。

谢谢