6yA28資訊網——每日最新資訊28at.com

按鈕是為任何網絡應用程序提供交互性的最常見方式。但我們經常傾向于使用其他HTML元素，如 div span 等作為 clickable 元素。6yA28資訊網——每日最新資訊28at.com

但通過這樣做，我們錯過了許多內置瀏覽器的功能。6yA28資訊網——每日最新資訊28at.com

我們缺少什么？

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

6yA28資訊網——每日最新資訊28at.com

權宜之計

我們需要在每次創建可點擊的 div 按鈕時，以編程方式添加所有這些功能。6yA28資訊網——每日最新資訊28at.com

6yA28資訊網——每日最新資訊28at.com

更好的解決方案

始終優先使用 button 作為可點擊元素，以獲取瀏覽器的所有內置功能，如果你沒有使用它，始終將上述列出的可訪問性功能添加到你的div中。6yA28資訊網——每日最新資訊28at.com

雖然，直接使用按鈕并不直觀。我們必須添加并修改一些默認的CSS和瀏覽器自帶的行為。6yA28資訊網——每日最新資訊28at.com

使用按鈕的注意事項

1、它自帶默認樣式

我們可以通過將每個屬性值設置為 unset 來取消設置現有的CSS。6yA28資訊網——每日最新資訊28at.com

我們可以添加 all:unset 一次性移除所有默認樣式。6yA28資訊網——每日最新資訊28at.com

在HTML中，我們有三種類型的按鈕。 submit, reset and button. 默認的按鈕類型是 submit.6yA28資訊網——每日最新資訊28at.com

無論何時使用按鈕，如果它不在表單內，請始終添加 type='button' ,因為 submit 和 reset 與表格有關。6yA28資訊網——每日最新資訊28at.com

2、請不要在按鈕標簽內部放置 divs

我們仍然需要添加 cursor:pointer 以便將光標更改為手形。
6yA28資訊網——每日最新資訊28at.com

6yA28資訊網——每日最新資訊28at.com

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。6yA28資訊網——每日最新資訊28at.com

6yA28資訊網——每日最新資訊28at.com

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

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

上一篇： JVM優化：實戰OutOfMemoryError異常

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