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

1. map和area

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./peppa.png" usemap="#Map"><map name="Map" id="Map">
    <area shape="circle" coords="200,200,100" href="#rect" alt="圆形"></map>

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

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

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

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

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

2. CSS3的border-radius属性

<div class="content"></div>
.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<r){
        alert("bbb")
    }
}

• Math.abs()：取绝对值

• Math.sqrt()：开平方

• Math.pow(num,n)：num的n次方

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