@leemiyinghao: *Lightbox pointer event 穿透* 黑邊關閉圖片是這次重構的重點之一，但也是最麻煩的。 以附圖為例： - 橘色斜線區域是應該要觸發關閉的黑邊區域。 - 綠色網狀區是圖片本身，應該要觸發拖曳或縮放效果。而且拖曳時橘色區域應該關閉。 - 紅色是切換圖片的手勢區域。 理想的做法是在橘色區域綁 `onClick`⋯⋯但 HTML 沒有 event mask 這種東西。而且黑邊的大小跟位置也不固定，用 event position 判斷並不實際。 CSS 有 `pointer-event: none` 可以使用，理論上在 Lightbox wrapper 設定事件穿透，讓後面的 backdrop 收得到事件就沒有問題了⋯⋯但這樣滑動手勢 TouchEvent 就會直接敲在圖片上，圖片沒有 overflow 沒辦法捲動。 最終的解決方案是根據 `@media(pointer: fine)` 的判斷來決定是否設定 `pointer-event: none`。原因是： 1. 觸控裝置的習慣關閉方式是拖曳圖片關閉，**黑邊會用來拖曳切換圖片**（而且我們在觸控裝置上也不會提供黑邊保留區域，這對手機並不友善）。 2. 滑鼠裝置的滾輪事件（包含 Trackpad）不受 `pointer-event` 影響，就算關閉也可以透過滾輪切換圖片。 3. 透過 CSS media selector 設定不同行為可以避免 re-render，對效能友善，也可以善用瀏覽器優化。 最終就得到了一個依照裝置不同有不同行為的黑邊。順帶一提，就算在觸控裝置上這個黑邊還是有關閉圖片的事件處理，只是瀏覽器並不會觸發到。