CSS在圆圈外点击导致事件

Question

我有一个用border-radius创建的圈子。如果我单击截止区域，则事件仍会触发。我如何在本地防止这种情况？还是在JS中检查它的唯一解决方案？

Answer 1

我试图重新创建您的案子，并且效果很好。两者都采用div + border-radius方法和svg

document.getElementById("circle1").onclick = function() {
  alert("svg clicked")
}

document.getElementById("circle2").onclick = function() {
  alert("div clicked")
}

.circle {
  width: 100px;
  height: 100px;
  
  border-radius: 50%;
  background-color: tomato;
}

<svg height="100" width="100">
  <circle cx="50" cy="50" r="50"  fill="red" id="circle1"/>
</svg>

<div class="circle" id="circle2"></div>