題幹與適用場景
產品希望在使用者對使用者名稱、文件連結或術語「感興趣」時顯示輕量預覽，但不能因 hover 消失、鍵盤操作或觸控裝置而讓內容不可用。請使用 HTML interest invoker 與 Popover API 設計方案，並說明延遲、焦點、關閉、瀏覽器不支援和資料載入失敗時的處理。
MDN 將 interestfor 描述為把按鈕或連結關聯到目標元素的宣告式機制；當目標是 popover 時，瀏覽器可在顯示 interest 時自動顯示它。Open UI explainer 記錄了 hovercard 的設計動機。本文基於公開資料整理，不聲稱是公司真題。
面試官考察點
面試官關注你是否把「懸停」提升為統一的 interest 狀態，涵蓋 pointer、focus、觸控和輔助技術。強回答會提到 interest/loseinterest、interest-delay-*、popover 的 top layer、焦點管理、無 JavaScript 核心路徑與漸進增強；普通回答只綁定 mouseenter/mouseleave。
回答前需要釐清的問題
- 預覽是補充資訊，還是完成任務所必需？
- 目標內容是否同源、可快取，是否允許延遲載入？
- 觸控裝置如何觸發和關閉，是否需要點擊進入詳細頁？
- 瀏覽器尚不支援 interest invoker 時，核心連結如何保持可用？
30 秒回答框架
「我會讓普通連結仍然指向詳細頁，再用 interestfor 把連結關聯到一個 popover 預覽。透過 interest delay 減少誤觸發，瀏覽器支援時由宣告式行為處理 pointer 與 focus；不支援時不影響連結，必要時用最小 JS polyfill。預覽內容可非同步載入但不能阻塞導覽，關閉時尊重焦點和 Escape 語意，並在減少動效時移除動畫。」
分步驟深入解答
結構上，連結或按鈕是 interest invoker，目標元素擁有穩定的 id 和 popover。invoker 的 interestfor 值參照目標 id。目標是 popover 時，平台負責把它放進 top layer 並套用 popover 生命週期；目標也可以只是普通元素，供應用程式監聽 interest 事件後決定是否顯示。
延遲策略避免使用者快速掃過連結時產生大量請求。使用 interest-delay-start 和 interest-delay-end 或等價的應用程式節流，先顯示骨架，再按快取鍵請求預覽。離開 invoker、進入目標 popover 或快速移動到另一個連結時，要取消未完成請求並只保留最後一次意圖。
鍵盤和觸控不能依賴 hover。焦點落到連結時應能顯示同一預覽，Escape 可關閉，Tab 順序仍通往詳細頁。觸控裝置可在第一次點擊展示預覽、第二次點擊導覽，或直接導覽並提供獨立的預覽按鈕；產品應選擇一種可解釋的規則，避免手勢衝突。
可存取性要求目標有可讀名稱、正確的關係和狀態回饋。預覽是補充資訊時不要強制焦點跳入 popover；若內容包含可互動控制項，則需要明確的焦點進入和返回路徑。螢幕閱讀器使用者應能直接存取詳細頁，不因預覽載入失敗而失去資訊。
能力偵測與回退保持核心路徑。沒有 interestfor 或 Popover API 時，連結照常導覽，預覽可退化為點擊展開或完全省略。若使用 polyfill，只補充顯示行為，不複製 top-layer、焦點和安全邊界的全部實作；記錄支援率、預覽開啟率、載入失敗率和導覽轉化。
高品質示範回答
我會把連結作為核心導覽，把 interest invoker 作為可選預覽層。interestfor 關聯穩定 id，目標使用 popover；平台處理 pointer/focus 的 interest，延遲和快取控制請求。鍵盤可聚焦、Escape 可關閉，觸控採用明確的點擊規則。瀏覽器不支援時保留普通連結，預覽失敗只影響補充層，不影響詳細頁存取。
常見錯誤
- 錯誤表現 → 只監聽 mouseenter；失敗原因 → 鍵盤、觸控和輔助技術無法觸發；修正方法 → 以 interest 與 focus 為核心，並保留導覽。
- 錯誤表現 → 預覽一出現就把焦點移入；失敗原因 → 使用者閱讀連結時被打斷；修正方法 → 僅在預覽含互動控制項且有明確規則時移動焦點。
- 錯誤表現 → 每次懸停都請求網路；失敗原因 → 快速掃過造成請求風暴；修正方法 → 使用延遲、取消、快取和最後意圖勝出。
- 錯誤表現 → 不支援時阻止連結；失敗原因 → 核心內容被實驗 API 綁架；修正方法 → 普通連結作為無條件回退。
追問及應對
為什麼預覽目標不一定需要 popover？
interestfor 可以把 invoker 與普通目標關聯，應用程式監聽 interest 事件後自行控制顯示；當目標是 popover 時，平台提供 top layer 和關閉語意。選擇取決於是否需要原生生命週期與輕量宣告式行為。
如何避免預覽遮擋另一個連結？
為目標設定穩定定位和碰撞策略，離開時使用結束延遲，進入 popover 視為仍有興趣。快速切換時取消舊請求、關閉舊目標並只提交最新 invoker 的結果。
預覽載入失敗時應怎樣回饋？
在預覽層顯示可重試的簡短狀態，並提供直接詳細頁連結；不要把錯誤擴散到頁面主內容。記錄失敗原因和延遲，超過預算時跳過預覽動畫或直接導覽。