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

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

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

• 無障礙問題（空格鍵或回車鍵無法觸發(fā)按鈕點(diǎn)擊）。
• 元素將無法通過按Tab鍵來聚焦。

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

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

更好的解決方案

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

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

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

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

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

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

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

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

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

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

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