1704707031240_855024_t.png

這樣一個(gè)小圖標(biāo) 差不多這樣顯示

<div>
<img src='我們要顯示的圖片' @click='點(diǎn)擊要觸發(fā)的事件’ />
</div>

產(chǎn)品經(jīng)理說(shuō)可點(diǎn)擊面積太小了，如何優(yōu)雅的擴(kuò)大點(diǎn)擊面積。

方案1 首先想到一個(gè)一個(gè)方案時(shí) 增加一個(gè)dom節(jié)點(diǎn) 覆蓋在img上 點(diǎn)擊監(jiān)聽(tīng)這個(gè)新的dom結(jié)點(diǎn)。如下樣子

//增加一個(gè)dom節(jié)點(diǎn) 覆蓋在
<div>
<img src='我們要顯示的圖片'  />
<div style='絕對(duì)定位樣式 覆蓋在圖片至少 ' @click='點(diǎn)擊要觸發(fā)的事件’   ></div>
</div>

評(píng)價(jià)：這個(gè)辦法的能夠解決問(wèn)題，但是增加了無(wú)用的dom ，維護(hù)會(huì)變得麻煩一點(diǎn)，新人來(lái)接手 很可能搞不懂這兩個(gè)dom是什么關(guān)系 可能誤刪除其中一個(gè)。

方案2，使用偽元素 ::after或::before，但是能夠想到這個(gè)方案 需要知道偽元素的點(diǎn)擊事件會(huì)冒泡到主元素上去。具體寫(xiě)法如下

<div>
<img src='我們要顯示的圖片' @click='點(diǎn)擊要觸發(fā)的事件’ />
</div>
<style>
img::after{
 content: '';
                position: absolute;
                top: -15rpx;
                left: -15rpx;
                right: -15rpx;
                bottom: -15rpx;
}
</style>

方案評(píng)價(jià)好處:沒(méi)有增加無(wú)用dom元素，不會(huì)給維護(hù)人員造成誤解困難。偽元素的作用就是主要就是被用于為當(dāng)前元素增加裝飾性?xún)?nèi)容的，dom真正結(jié)點(diǎn)是要渲染真正的內(nèi)容的，不相關(guān)主內(nèi)容 就應(yīng)該用偽元素解決。