如何在頁面上實現一個圓形的可點擊區域？

三種解決方案： 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>