HTML5移動端下常用點擊狀態的處理

在開發移動端頁面的時候，為了提高用戶體驗，通常會給被觸控的元素加上一個效果來對用戶的操作進行反饋。本文收集了這種反饋主要有三種實現方式，有需要的朋友們下面來一起看看吧。

一、偽類:active

：active偽類常用於設定點擊狀態下或其他被激活狀態下一個鏈接的樣式。最常用於錨點這種情況，一般主流瀏覽器下也支持其他元素，如button等。在多按鍵的鼠標系統中，：active只適用於主按鍵，目前的大部分情況都是左鍵即主鍵。

該偽類下定義的CSS樣式只在按下鼠標按鈕與釋放鼠標按鈕之間的短暫瞬間被觸發顯示。使用鍵盤的tab鍵也可以觸發:active狀態。

偽類是一種比較方便的實現方式，但在ios中，需要在相關的元素或者body上綁定touchstart事件才能使元素的:active生效。

二、webkit-tap-highlight-color

這個屬性並不是標準的，被用於設置超鏈接被點擊時高亮的顏色，在ios設備上表現為一個半透膜的灰色背景，可以設置 -webkit-tap-highlight-color 為任何顏色，例如 rgba(0,0,0,0.5) ，如果未設置顏色的 alpha 值，將使用默認的透明度， alpha為0時，將禁用高亮，alpha 為1時，元素在點擊時將不可見大部分安卓設備也支持這個屬性，但是顯示的效果不同，表現為一個邊框，-webkit-tap-highlight-color 的值為邊框的顏色。

三、touch事件

當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件。原理就是 touchstart 時，給元素添加 className，touchstend時移除 className

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助。想學習更多知識，請關注“恆星網絡”頭條號。