資訊專欄INFORMATION COLUMN
摘要：在開發(fā)移動端頁面的時候，為了提高用戶體驗，通常會給被觸控的元素加上一個效果來對用戶的操作進行反饋，這種反饋主要有三種實現(xiàn)方式偽類偽類是一種比較方便的實現(xiàn)方式，但在中，需要在相關的元素或者上綁定事件才能使元素的生效也可以直接在上添加此
在開發(fā)移動端頁面的時候，為了提高用戶體驗，通常會給被觸控的元素加上一個效果來對用戶的操作進行反饋，這種反饋主要有三種實現(xiàn)方式:
偽類:active
偽類是一種比較方便的實現(xiàn)方式，但在 ios 中，需要在相關的元素或者 body 上綁定 touchstart
事件才能使元素的 :active 生效
document.body.addEventListener("touchstart", function (){});
也可以直接在 body 上添加
此外，由于移動端 300ms 延遲問題，觸摸反饋會有延遲，可以使用 Fastclick 解決
局限性：
僅當輕觸時有效，當長按時只是動畫閃動，無法實現(xiàn)點擊時觸發(fā)動畫，離開時取消動畫的效果
-webkit-tap-highlight-color
這個屬性并不是標準的，被用于設置超鏈接被點擊時高亮的顏色，在ios設備上表現(xiàn)為一個半透膜的灰色背景，可以設置-webkit-tap-highlight-color為任何顏色，例如rgba(0,0,0,0.5)，如果未設置顏色的alpha值，將使用默認的透明度，alpha為0時，將禁用高亮，alpha為1時，元素在點擊時將不可見，大部分安卓設備也支持這個屬性，但是顯示的效果不同，表現(xiàn)為一個邊框，-webkit-tap-highlight-color的值為邊框的顏色
局限性：
必須將需要設置點擊效果的元素使用a標簽包裹，而且在安卓一些機型上存在兼容
touch事件
原理就是touchstart時，給元素添加className，touchstend時移除className
僅需給需要效果的元素添加 data-touch="true"，css中有對應的.active即可
轉載自：移動端點擊態(tài)處理
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/84635.html
摘要：開發(fā)中經常需要加入點擊二態(tài)，即用戶點擊頁面某個部分時該部分的樣式進行相應的變化來相應用戶的點擊操作，這樣能夠帶來更好的用戶體驗，今天我們要討論的是如何給圖標加上點擊的二態(tài)效果。如果添加蒙層我們先用最容易想到的方法來實現(xiàn)這個需求。 webapp開發(fā)中經常需要加入點擊二態(tài)，即用戶點擊（tap）頁面某個部分時該部分的樣式進行相應的變化來相應用戶的點擊操作，這樣能夠帶來更好的用戶體驗，今天我們...
摘要：開發(fā)中經常需要加入點擊二態(tài)，即用戶點擊頁面某個部分時該部分的樣式進行相應的變化來相應用戶的點擊操作，這樣能夠帶來更好的用戶體驗，今天我們要討論的是如何給圖標加上點擊的二態(tài)效果。如果添加蒙層我們先用最容易想到的方法來實現(xiàn)這個需求。 webapp開發(fā)中經常需要加入點擊二態(tài)，即用戶點擊（tap）頁面某個部分時該部分的樣式進行相應的變化來相應用戶的點擊操作，這樣能夠帶來更好的用戶體驗，今天我們...
閱讀 2102·2023-04-25 22:58
閱讀 1451·2021-09-22 15:20
閱讀 2725·2019-08-30 15:56
閱讀 2035·2019-08-30 15:54
閱讀 2160·2019-08-29 12:31
閱讀 2782·2019-08-26 13:37
閱讀 627·2019-08-26 13:25
閱讀 2144·2019-08-26 11:58
