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

一、border-radius（CSS3）

对于圆形，最直接的方法想到的就是 CSS3 的圆角属性，这个属性可以将 HTML 元素的形状设置为圆形，这之后你想对该圆形区域设置什么事件就设置什么事件（当然包括点击）。

二、通过事件坐标来实现（JS）

也就是通过 JS 来进行一个区域判断，进而间接形成可点区域，以下给出主要的 JS 测试代码：

// 获取目标元素
var box = document.getElementById("box");

// 对目标元素 target 的圆形区域进行一个点击事件绑定
function bindClickOnCircleArea(target, callback) {
    target.onclick = function(e) {
        e = e || window.event;

        // target 中心点的坐标
        var x1 = 100;
        var y1 = 100;

        // 事件源坐标
        var x2 = e.offsetX;
        var y2 = e.offsetY;

        // 校验是否在圆形点击区，在的话就执行 callback 回调
        // 计算事件触发点与 target 中心的位置
        var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
        // 通过半径进行校验
        if (len <= 100) {
            callback();
        } else {
            alert("死鬼，跑哪去啊，你老婆我是黄皮肤还是白皮肤都分不清了吗");
        }
    };
}

// 执行
bindClickOnCircleArea(box, function() {
    alert("老婆，你让我好找啊，呜呜呜");
});

三、通过 map + area

usemap 属性与 map 的 name / id 属性相同：

<img src="../imgs/test.jpg" width="200" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="circle" coords="100,100,100"
        href="http://www.baidu.com" target="_blank" />
</map>

map 标签

带有可点击区域的图像映射：

<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14"
          href="/example/html/venus.html"
          target="_blank"
          alt="Venus" />

    <area shape="rect" coords="0,0,110,260"
          href="/example/html/sun.html"
          target="_blank"
          alt="Sun" />
</map>

注释：img 元素中的 usemap 属性引用 map 元素中的 id 或 name 属性（根据浏览器），所以我们同时向 map 元素添加了 id 和 name 属性。

补充

补充：以上三种思路覆盖了"用 CSS 改形状 / 用 JS 算坐标 / 用 HTML 原生 area 标签"三种完全不同的实现路径。

怎么选

方案	适用场景	优点	缺点
border-radius	普通按钮、头像	简单、CSS 一行解决	不能做不规则形状
事件坐标计算	不规则多边形、热区判断	灵活	性能差、边界闪烁
map + area	图片热点区域	原生支持、可做多边形	语义不强、不适合动态 UI