移動端ios:active偽類無效的相容解決方案

蘋果手機瀏覽頁面中設定的css偽類：active失效。查詢資料發現要讓css active偽類生效，只需要給這個元素的touchstart/touchend繫結一個空的匿名方法即可成功。

:active偽類常用於設定點選狀態下或其他被啟用狀態下一個連結的樣式。最常用於錨點<a href="#">這種情況，一般主流瀏覽器下也支援其他元素。在多按鍵的滑鼠系統中，：active只適用於主按鍵，目前的大部分情況都是左鍵即主鍵。該偽類下定義的CSS樣式只在按下滑鼠按鈕與釋放滑鼠按鈕之間的短暫瞬間被觸發顯示。使用鍵盤的tab鍵也可以觸發:active狀態。

說說 設定滑鼠互動的四個偽類:link,:visited,:hover,:active；注意將 :visited放到最後，則會導致：若連結已經被訪問過，a:visited會覆蓋:active和:hover的樣式宣告，必須按照順序定義，一般稱為LVHA-order: :link — :visited — :hover — :active。

專案中是移動端頁面要做一個按鈕狀態切換的效果，在PC上測試沒有問題，到了手機端發現安卓的正常，iOS則沒有效果了。原因是在iOS系統的移動裝置中，需要在按鈕元素或body/html上繫結一個touchstart事件才能啟用:active狀態。