javascript - CSS在圆圈外点击会导致事件

Question

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

标签： javascriptcss

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>