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

三种解决方案： html标签、css实现、 纯js实现

方案一：

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

<img src="task6.jpg" width="1366" height="768" border="0" usemap="#Map" />
<map name="Map" id="Map">
 <area shape="circle" coords="100,100,50" href="https://www.baidu.com" target="_blank" />
</map>  

方案二：

<style>
 .disc{
     width:100px;
     height:100px;
     background-color:dimgray;
     border-radius: 50%;
     cursor: pointer;
     position: absolute;
     left:50px;
     top:50px;
     line-height: 100px;
     text-align: center;
     color: white;
 }
</style>

<div class="disc">点击区域</div>  

方案三：

    <script>
        document.onclick = function(e){
            var r = 50;  //圆的半径
            var x1 = 100,  y1 = 100;
            var x2 = e.clientX,
                y2 = e.clientY;
            var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
            if(len<=50){
                console.log("Inner");
            }else{
                console.log("Outer");
            }
        }
    </script>