CSS click outside a circle causes event

Question

I have a circle created with border-radius. If I click on the cut-off area, the event still fires. How do I prevent this natively? Or is the only solution to check it in JS?

You might be listening to events on something other than the element that you've clipped. Add a code example? — YellowAfterlife, Mar 16 '19 at 05:36
Possible duplicate of [Circle button css](https://stackoverflow.com/questions/38320878/circle-button-css) — Madhawa Priyashantha, Mar 16 '19 at 05:38
I would add `overflow: hidden` and see if the event still fires. — Andy Hoffman, Mar 16 '19 at 05:44
bind an event handler to the `body` and within the handler check the target element — Pranav C Balan, Mar 16 '19 at 09:22

score 3 · Answer 1 · answered Mar 16 '19 at 05:39

I tried to recreate your case and it works just fine. Both with div+border-radius approach and 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>

CSS click outside a circle causes event

1 Answers1