圆形可点击区域实现

使用 CSS、map area 和 JavaScript 实现圆形点击区域

问题

如何实现一个圆形的可点击区域？

解答

方法一：CSS border-radius

最简单的方式，但只是视觉上的圆形，实际点击区域仍是矩形。

<!DOCTYPE html>
<html>
<head>
  <style>
    .circle-button {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #3498db;
      border: none;
      cursor: pointer;
      color: white;
    }
  </style>
</head>
<body>
  <button class="circle-button">点击</button>
</body>
</html>

方法二：CSS clip-path（真正的圆形点击区域）

<!DOCTYPE html>
<html>
<head>
  <style>
    .circle-clip {
      width: 100px;
      height: 100px;
      background-color: #e74c3c;
      /* clip-path 会裁剪点击区域 */
      clip-path: circle(50% at center);
      border: none;
      cursor: pointer;
      color: white;
    }
  </style>
</head>
<body>
  <button class="circle-clip">点击</button>
</body>
</html>

方法三：HTML map + area

使用图像映射创建精确的圆形点击区域。

<!DOCTYPE html>
<html>
<body>
  <!-- 图片宽高 200x200，圆心 (100,100)，半径 100 -->
  <img src="circle.png" usemap="#circlemap" width="200" height="200">
  
  <map name="circlemap">
    <!-- shape="circle" coords="圆心x, 圆心y, 半径" -->
    <area shape="circle" coords="100,100,100" href="#" alt="圆形区域" onclick="handleClick()">
  </map>

  <script>
    function handleClick() {
      alert('点击了圆形区域');
    }
  </script>
</body>
</html>

方法四：JavaScript 坐标判断

通过计算点击位置与圆心的距离判断是否在圆内。

<!DOCTYPE html>
<html>
<head>
  <style>
    .circle-area {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #9b59b6;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="circle-area" id="circle"></div>

  <script>
    const circle = document.getElementById('circle');
    
    circle.addEventListener('click', function(e) {
      const rect = this.getBoundingClientRect();
      const radius = rect.width / 2;
      
      // 计算圆心坐标
      const centerX = rect.left + radius;
      const centerY = rect.top + radius;
      
      // 计算点击位置到圆心的距离
      const distance = Math.sqrt(
        Math.pow(e.clientX - centerX, 2) + 
        Math.pow(e.clientY - centerY, 2)
      );
      
      // 判断是否在圆内
      if (distance <= radius) {
        alert('点击在圆形区域内');
      }
    });
  </script>
</body>
</html>

方法五：SVG

SVG 元素天然支持精确的形状点击区域。

<!DOCTYPE html>
<html>
<body>
  <svg width="200" height="200">
    <circle 
      cx="100" 
      cy="100" 
      r="100" 
      fill="#2ecc71" 
      style="cursor: pointer;"
      onclick="alert('点击了 SVG 圆形')"
    />
  </svg>
</body>
</html>

关键点

border-radius: 50% 只改变视觉外观，点击区域仍是矩形
clip-path: circle() 可以裁剪真正的点击区域
<area shape="circle"> 使用 coords="x,y,r" 定义圆心和半径
JavaScript 方案通过勾股定理判断点击点到圆心距离是否小于半径
SVG 的 <circle> 元素自带精确的圆形点击区域