沒穿方服

備料

在 React 專案，採用 Floating UI 的 FloatingPortal 作為圖片容器，用一個 atom 記錄目前要預覽的 URL，然後在 <a> 的 mouse 事件操作它們。

根據所在連結的 URL 判斷是否為圖片，是的話就載入，onLoad 時設定維度，讓 Floating UI 自己判斷位置。

打磨

• 問題：圖片在畫面邊緣會跳動

  圖片切到畫面邊緣時，Floating UI 會嘗試重新定位，造成跳動。

  更糟的是，因為 mouseover 會更新滑鼠位置，而且「載入中」的圖片尺寸、載入後的圖片尺寸調整都會變更最終維度，以致跳動可能循環，看起來就是不斷抖動。

  不好解決，最後用騙的，把容器的 pointer-events 關掉避免重複滑鼠事件，再用 CSS 動畫讓圖片先保持透明，100 ms 後才看得見，這時閃爍多半也結束了。

  參考 commit 817b816。

• 問題：手機上沒有 mouse 事件

  手機上無法用 mouseover/mouseout 事件來偵測到需要預覽，會變成 touch 的時候啟動預覽。

  雖然仍有基本可用性，但無法用 mouseout 關閉預覽，且再度 touch 時，到底會再度預覽，還是變成 touch 連結而開啟，行為差異很細微，使用者難以預期。

  解決方式是另外處理 touch 事件（onTouchStart, onTouchEnd, onTouchCancel），自己處理預覽行為，唯有當 touch 按住超過一定時間後，才交還瀏覽器內建的處理器（打開連結）。

  參考 commit dbf3fe4 和 3d56fce。

成果

這個功能做在 Feeders 事實選集和地圖留言中，原始碼都在 GitHub。

原理

起因是網站頂端搜尋列 (Search Bar) 輸入框有 autoFocus 設定，網頁技術用 React，輸入框錨上去後會搶走 focus，而瀏覽器行為會讓捲軸跟上，這是為什麼會捲到頂端。

又因為 focus 在輸入框，所以敲鍵盤也都被它吃掉，加上輸入框在畫面上還看不見，就變成鍵盤不理人的情形。

React 的 autoFocus 不同於標準 autofocus 屬性，DOM 裡面看不到，React 會自己模擬那個行為（你也不想每次 re-render 都 autofocus 吧）。

治本的方法是不要用 autoFocus，我有開一個 PR，但還未被處理。

補一下表態，報導者很多專題網頁都做超棒，也擁抱開源，契合組織理念，以開發者觀點我高度推崇。