每個(gè)和產(chǎn)品撕過(guò)逼的開(kāi)發(fā)都應(yīng)該知道，產(chǎn)品除了想要 ui 把按鈕設(shè)計(jì)的再大茸习、更大日麸、還可以大之外，就希望開(kāi)發(fā)把點(diǎn)擊區(qū)域變得大大 大一點(diǎn)墩划，讓用戶瞎著都能點(diǎn)中按鈕嗡综。
恩可憐的開(kāi)發(fā)如果撕不過(guò)，只能可憐的再把所有定位再重新計(jì)算一遍嗎极景？T-T
那么今天也來(lái)優(yōu)雅的解決一下。
今天這個(gè)方法學(xué)自 ionic 框架中的樣式盼樟，后又在《CSS 秘密花園》這本書(shū)里也有講到，今天在此普及一下译秦。
想要在不影響現(xiàn)有布局的情況下击碗，不增加多余元素的情況下，增大點(diǎn)擊區(qū)域稍途，我們可以使用 CSS 中的偽元素來(lái)實(shí)現(xiàn)。
::before ::after
::before和::after兩個(gè)偽元素械拍，可以不用在 .html 文件中顯式插入元素的情況下，增加兩個(gè)dom節(jié)點(diǎn)甲馋。
<!-- 在 html 中 -->
<div>
Hello World
</div>
/* 在 css 中 */
div::before,
div::after {
content: '?';
}
在瀏覽器中顯示為：
? Hello World ?
在瀏覽器檢查器中顯示為：
<div>
::after
' Hello World '
::before
</div>
所以我們利用這種特性猖吴，在 CSS 中設(shè)置偽元素來(lái)擴(kuò)大點(diǎn)擊區(qū)域挥转，顯然是最劃得來(lái)的。
代碼大改造
改造后的點(diǎn)擊區(qū)域已經(jīng)變大了一圈绑谣，整個(gè)過(guò)程沒(méi)有修改原有的代碼僅 css 增加了一個(gè)偽元素党窜。
實(shí)現(xiàn)原理
由于點(diǎn)擊事件是綁定在元素上的幌衣，所以通過(guò)在內(nèi)部添加偽元素的好處是，
- 偽元素使用絕對(duì)定位不會(huì)改變現(xiàn)有的文檔流和布局尺寸
- 偽元素繼承了元素的
cursor屬性豁护，鼠標(biāo)指針顯示與元素保持一致 - 偽元素能觸發(fā)事件并冒泡給元素
所以通過(guò)這樣的方式，讓我們不改變現(xiàn)有代碼断部，僅添加一小段代碼就可以優(yōu)雅地?cái)U(kuò)大點(diǎn)擊區(qū)域了班缎。
