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

css3，js，map加区域

一。边界半径（css3）

对于圆形，最直接的方法想到的就是css3的圆角属性，这个属性可以将html元素的形状设置为圆形，这之后你认为该圆形区域设置什么事件就设置什么事件（当然包括点击）。（这里就不做具体的测试了）

二。通过事件坐标来实现（js）

也就是通过js来进行一个区域判断，且靴子简介地的形成可点区域，以下称为主要的js测试代码：

//获取目标元素
var box =  document。getElementById（ “ box ”）;

//对目标元素目标的圆形区域进行一个点击事件绑定
功能 bindClickOnCircleArea（目标，回调）{
   target。onclick  =  函数（ e）{
    e = e ||  窗口。事件 ;

    // targetcenter点的坐标
    var x1 =  100 ;
    var y1 =  100 ;

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

    //验证是否在圆形点击区，在的话就执行回调或
    //计算事件触发点与目标中心的位置
    var len =  Math。ABS（数学。 SQRT（数学。 POW（X2 - X1， 2） +  数学。 POW（Y2 - Y1， 2）））;
    //通过国会进行校正
    if（len <=  100）{
       callback（）;
    } else {
       alert（“死鬼，跑哪去啊，你老婆我是黄皮肤还是白皮肤都分不清了吗”）;
    }
  };
}

//执行
bindClickOnCircleArea（框，函数（）{
   alert（ “老婆，你让我好找啊，呜呜呜”）;
}）;

三。通过地图加面积

< img  src = “ ../imgs/test.jpg ”  width = “ 200 ”  border = “ 0 ”  usemap = “ #Map ” />
< 地图 名称 = “地图”  id = “地图” >
  < 区域
    形状 = “圆”
    坐标 = “ 100,100,100 ”
     href = “ http://www.baidu.com ”
     target = “ _blank ”
  />
</ map >