按鈕是為任何網(wǎng)絡(luò)應(yīng)用程序提供交互性的最常見(jiàn)方式。但我們經(jīng)常傾向于使用其他HTML元素，如 div span 等作為 clickable 元素。

但通過(guò)這樣做，我們錯(cuò)過(guò)了許多內(nèi)置瀏覽器的功能。

我們?nèi)鄙偈裁矗?/span>

• 無(wú)障礙問(wèn)題（空格鍵或回車(chē)鍵無(wú)法觸發(fā)按鈕點(diǎn)擊）。
• 元素將無(wú)法通過(guò)按Tab鍵來(lái)聚焦。

權(quán)宜之計(jì)

我們需要在每次創(chuàng)建可點(diǎn)擊的 div 按鈕時(shí)，以編程方式添加所有這些功能。

更好的解決方案

始終優(yōu)先使用 button 作為可點(diǎn)擊元素，以獲取瀏覽器的所有內(nèi)置功能，如果你沒(méi)有使用它，始終將上述列出的可訪問(wèn)性功能添加到你的div中。

雖然，直接使用按鈕并不直觀。我們必須添加并修改一些默認(rèn)的CSS和瀏覽器自帶的行為。

使用按鈕的注意事項(xiàng)

1、它自帶默認(rèn)樣式

我們可以通過(guò)將每個(gè)屬性值設(shè)置為 unset 來(lái)取消設(shè)置現(xiàn)有的CSS。

我們可以添加 all:unset 一次性移除所有默認(rèn)樣式。

在HTML中，我們有三種類(lèi)型的按鈕。 submit, reset and button. 默認(rèn)的按鈕類(lèi)型是 submit.

無(wú)論何時(shí)使用按鈕，如果它不在表單內(nèi)，請(qǐng)始終添加 type='button' ,因?yàn)?nbsp;submit 和 reset 與表格有關(guān)。

2、請(qǐng)不要在按鈕標(biāo)簽內(nèi)部放置 divs

我們?nèi)匀恍枰砑?cursor:pointer 以便將光標(biāo)更改為手形。

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。