不规则热区绑定事件

        日常前端开发中，UI小伙伴们脑洞大开突然给你来了一个不规则图形作热区，只能点击图像位置，但是我们HTML的标签都是方形的，不知道你心里会不会暗暗说了一些礼貌的话，可是生活还是得勇往直前，敲了敲脑袋，灯泡冒出来了，最常用的就是map和area组合以及clipPath 

一、clipPath 

         由于项目要兼容IE9及其以上所以果断放弃了clipPath，还有个原因就是clipPath会毁坏原来的图形（IE真是个小可爱！）

        具体操作可参考 clip-path相关使用说明

二、map和area标签

        map用于定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。area定义map的可点击区域。map和area同时出现。img标签可以指定usermap属性，关联map。

        area有几种类型，分别是矩形、圆形和多边形。在我们这个例子中，可以通过多边形定义热区。多边形边界的坐标可以通过绘图软件获取

        话不多说，直接上简易demo，重点还是在coords坐标的获取

​
​
​
<div class="box">
    <img src="./demo.png" usermap="#demo-map"/>
    <map name="demo-map">
    <area shape="polygon" coords="54,122,236,75,252,102,262,131,268,162,54,122" href="test()"/>
    </map>
</div>
<script>
    function test() {
        console.log('test')
    }
</script>

​

​

​

        注意：多边形最后一个点要和第一个点重合

        这种方法基本可以做到目标热区的100%重合，而且同一张图片可以设置多个热区，实现一张图片中不同的位置绑定不同的事件，只是较为复杂的图形需要图形软件配合获取多边形坐标。实现可参考如何用ps找到圆形多边形坐标来确定coords的值相关操作（一般都麻烦UI小伙伴们，麻烦人态度得好）

 详情资料可以查看详细文档：map、area