三种方式实现圆形可点击区域

1. map和area

将img和map标签连起来的是usemap，它的值是map的id
area属性：

• shape：表示热点区域的形状，支持rect（矩形），circle（圆形），poly（多边形）

• coords：表示热点区域的坐标，(0,0)表示图片左上角。rect四个值分别表示左上角坐标和右下角坐标。circle三个值分别表示圆心坐标和半径。poly有若干个值，每两个表示一个坐标点。

• href：表示链接到某个地址，和标签差不多

• alt：对该区域描述，类似于的alt

2. CSS3的border-radius属性

.content{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #ccc;}
var content = document.getElementsByClassName("content")[0]
content.addEventListener("click",function(){
    alert("aaa")
})

3. js实现
原理：设定一个坐标原点和半径，获取鼠标的x,y轴位置，当鼠标的位置与原点的位置不超过半径时，可点击（参照数学知识）

document. = function(e){    let [x,y,r] = [100,100,100] // x,y为坐标原点，r为半径
    let x1 = e.clientX; // 获取x坐标
    let y1 = e.clientY; // 获取y坐标
    let dis = Math.abs(Math.sqrt((Math.pow(x-x1,2)+Math.pow(y-y1,2))))    if(dis
Math.abs()：取绝对值
Math.sqrt()：开平方
Math.pow(num,n)：num的n次方


作者：椰果粒
链接：https://www.jianshu.com/p/4904f96b06b3