网页空白区域消除点击的方法
一、前言
现在开发前端,总会遇到一些奇奇怪怪的形状,比如要求这个图标是个三角形(或者其他不规整的情况)。
大多数情况就是ui直接给了图,我们当背景引入,但是呢,我们的元素是一个矩形区域,这个时候如果绑定了点击事件之类的,透明的部分也会被绑定到。
一般来说是不会有什么大问题,但耐不住测试跟你较真啊,这个空白区域怎么也能点击?bugbug,都是bug,回炉重造。
所以今天就来盘点盘点下,空白区域消除点击的方法。
二、方案
1、cilp-path属性
看过我之前的文章# clip-path属性深入使用的朋友们都知道,cilp-path是一个灵活度非常高的属性,让我们打破了盒子模型,可以自由撰写多边形。
这里我们简单用下里面的circle属性
clip-path: circle(40px at 50% 50%);
直接在网页上修改样式,可以看到百度的按钮变成了椭圆形,而原本周围可点击的部分,也无法点击了。(border-radius也可以做到类似效果)
这里只是简单检验一下效果,一般而言用得到的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>
画面中有电脑手机咖啡等等物品,我们创建了map容器,指向了这张图,同时创建了3个area区域,分别划分范围,实现不同的事件触发。
换个思路就是,我们画出非空白部分,给其绑定事件,空白区域就不绑定事件就可以了。
3、利用伪元素或其他元素
思路就是,利用伪元素或者其他元素,写出一块和空白区域一样大小的dom,叠在空白区域上面,也可以实现效果。
不过就是有点费时费力,如果遇到的是比较复杂的图形的话。
4、图片透明部分不可点击,实体部分可点击
思路:用canvas画一个同等大小、同一位置的图片,叠上去。用canvas固有方法判断点击位置是否透明。
其中的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小水一波。
来源:juejin.cn/post/7228692613036081189