html如何加圆形区域,如何在页面上实现一个圆形的可点击区域？

html>

Document

*{

margin: 0;

padding:0;

}

.circle{

width: 200px;

height: 200px;

border-radius: 200px;

background-color: pink;

cursor: pointer;

}

var div = document.querySelector(".circle");

document.addEventListener("click",function(e){

let circleX = div.offsetWidth / 2;

let circleY = div.offsetHeight / 2;

let clickX = e.clientX - div.offsetLeft;

let clickY = e.clientY - div.offsetTop;

let distance = Math.abs(Math.sqrt(Math.pow(circleX-clickX,2)+Math.pow(circleY-clickY,2)))

if(distance<=100){

alert("在圆内");

}else{

alert("在圆外")

}

})