如何给一个小图片扩大点击面积--小众却适用的技能-伪元素使用技巧

1704707031240_855024_t.png

这样一个小图标 差不多这样显示

<div>
<img src='我们要显示的图片' @click='点击要触发的事件’ />
</div>

产品经理说可点击面积太小了，如何优雅的扩大点击面积。

方案1 首先想到一个一个方案时 增加一个dom节点 覆盖在img上 点击监听这个新的dom结点。如下样子

//增加一个dom节点 覆盖在
<div>
<img src='我们要显示的图片'  />
<div style='绝对定位样式 覆盖在图片至少 ' @click='点击要触发的事件’   ></div>
</div>

评价：这个办法的能够解决问题，但是增加了无用的dom ，维护会变得麻烦一点，新人来接手 很可能搞不懂这两个dom是什么关系 可能误删除其中一个。

方案2，使用伪元素 ::after或::before，但是能够想到这个方案 需要知道伪元素的点击事件会冒泡到主元素上去。具体写法如下

<div>
<img src='我们要显示的图片' @click='点击要触发的事件’ />
</div>
<style>
img::after{
 content: '';
                position: absolute;
                top: -15rpx;
                left: -15rpx;
                right: -15rpx;
                bottom: -15rpx;
}
</style>

方案评价好处:没有增加无用dom元素，不会给维护人员造成误解困难。伪元素的作用就是主要就是被用于为当前元素增加装饰性内容的，dom真正结点是要渲染真正的内容的，不相关主内容 就应该用伪元素解决。