单击重叠区域时如何触发两个元素的单击

Question

我有两个相互重叠的元素，都有点击事件。单击每个元素工作正常。

如果我点击如下图所示的重叠区域，是否可以同时触发两者的点击？

下面是我的代码

$("#circle1").click(function(d) {
  alert("circle1");
});
$("#circle2").click(function(d) {
  alert("circle2");
});

.path {
  fill: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="525" height="226">
   <circle id="circle1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
   <circle id="circle2" cx="80" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" />
</svg>

Answer 1

以下是如何计算clientX每个重叠区域的计算方法click event，并确保它是您已经提供的重叠X区域。这是一个例子。例如，我提供了一个大概的想法，您可以根据自己的实际尺寸进行计算。Ycircles

$(".circle").click(function(e) {
    if((event.clientX>50  && event.clientX<80) && (event.clientY>25 && event.clientY<85)){
    alert('overlaper area');
    }
});

.path {
  fill: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<svg width="525" height="226">
   <circle class="circle" id="circle1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
   <circle class="circle" id="circle2" cx="80" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" />
</svg>