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