一、前言

现在开发前端，总会遇到一些奇奇怪怪的形状，比如要求这个图标是个三角形（或者其他不规整的情况）。

大多数情况就是ui直接给了图，我们当背景引入，但是呢，我们的元素是一个矩形区域，这个时候如果绑定了点击事件之类的，透明的部分也会被绑定到。

一般来说是不会有什么大问题，但耐不住测试跟你较真啊，这个空白区域怎么也能点击？bugbug，都是bug，回炉重造。

所以今天就来盘点盘点下，空白区域消除点击的方法。

二、方案

1、cilp-path属性

看过我之前的文章# clip-path属性深入使用的朋友们都知道，cilp-path是一个灵活度非常高的属性，让我们打破了盒子模型，可以自由撰写多边形。

这里我们简单用下里面的circle属性

clip-path: circle(40px at 50% 50%);

直接在网页上修改样式，可以看到百度的按钮变成了椭圆形，而原本周围可点击的部分，也无法点击了。（border-radius也可以做到类似效果）

QQ图片20230430164354.png

这里只是简单检验一下效果，一般而言用得到的clip-path是polygon多边形属性。

2、html5原生标签map和area

这里我们还是沿用这个w3school的例子，老经典了。

引入了一张图，或者其他元素吧，设置usemap为#workmap，然后后面跟map标签，name要对得上。

里面用area划分区域，shape确定形状，然后coords界定具体范围，然后就可以绑定各自的事件了。

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> 
<map name="workmap">  
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">  
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">  
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">  
</map>

QQ图片20230430142008.png

画面中有电脑手机咖啡等等物品，我们创建了map容器，指向了这张图，同时创建了3个area区域，分别划分范围，实现不同的事件触发。

换个思路就是，我们画出非空白部分，给其绑定事件，空白区域就不绑定事件就可以了。

3、利用伪元素或其他元素

思路就是，利用伪元素或者其他元素，写出一块和空白区域一样大小的dom，叠在空白区域上面，也可以实现效果。

不过就是有点费时费力，如果遇到的是比较复杂的图形的话。

4、图片透明部分不可点击，实体部分可点击

思路：用canvas画一个同等大小、同一位置的图片，叠上去。用canvas固有方法判断点击位置是否透明。

QQ图片20230430222322.png

其中的ctx.getImageData就是用来取色的，通过判断透明度来决定触不触发事件。

var ctx = c.getContext("2d");


var imgdata = ctx.getImageData(x, y, 1, 1);  

console.log("点击位置的全部颜色数据[r,g,b,a]", imgdata.data);  

console.log("点击位置的透明度颜色数据(0~255，0代表完全透明，255代表完全不透明) value：", imgdata.data[3]);

三、个人推荐

复杂区域推荐用方案一、方案二

简单区域可以用方案三

方案四的话，操作起来比较麻烦，如果空白区域太复杂的话，也可以试一试。

ps: 我是地霊殿__三無, 51小水一波。

网页空白区域消除点击的方法