0QZ28資訊網(wǎng)——每日最新資訊28at.com

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

但通過這樣做，我們錯過了許多內(nèi)置瀏覽器的功能。0QZ28資訊網(wǎng)——每日最新資訊28at.com

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

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

0QZ28資訊網(wǎng)——每日最新資訊28at.com

權(quán)宜之計

我們需要在每次創(chuàng)建可點擊的 div 按鈕時，以編程方式添加所有這些功能。0QZ28資訊網(wǎng)——每日最新資訊28at.com

0QZ28資訊網(wǎng)——每日最新資訊28at.com

更好的解決方案

始終優(yōu)先使用 button 作為可點擊元素，以獲取瀏覽器的所有內(nèi)置功能，如果你沒有使用它，始終將上述列出的可訪問性功能添加到你的div中。0QZ28資訊網(wǎng)——每日最新資訊28at.com

雖然，直接使用按鈕并不直觀。我們必須添加并修改一些默認(rèn)的CSS和瀏覽器自帶的行為。0QZ28資訊網(wǎng)——每日最新資訊28at.com

使用按鈕的注意事項

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

我們可以通過將每個屬性值設(shè)置為 unset 來取消設(shè)置現(xiàn)有的CSS。0QZ28資訊網(wǎng)——每日最新資訊28at.com

我們可以添加 all:unset 一次性移除所有默認(rèn)樣式。0QZ28資訊網(wǎng)——每日最新資訊28at.com

在HTML中，我們有三種類型的按鈕。 submit, reset and button. 默認(rèn)的按鈕類型是 submit.0QZ28資訊網(wǎng)——每日最新資訊28at.com

無論何時使用按鈕，如果它不在表單內(nèi)，請始終添加 type='button' ,因為 submit 和 reset 與表格有關(guān)。0QZ28資訊網(wǎng)——每日最新資訊28at.com

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

我們?nèi)匀恍枰砑?cursor:pointer 以便將光標(biāo)更改為手形。
0QZ28資訊網(wǎng)——每日最新資訊28at.com

0QZ28資訊網(wǎng)——每日最新資訊28at.com

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。0QZ28資訊網(wǎng)——每日最新資訊28at.com

0QZ28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-152-0.html為什么你不應(yīng)該使用Div作為可點擊元素

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： JVM優(yōu)化：實戰(zhàn)OutOfMemoryError異常

下一篇： 每天一道面試題-CPU偽共享