資訊專欄INFORMATION COLUMN
摘要：跨平臺的特性極大地降低了開發成本和推廣難度，同時也帶來了一個問題如何讓的體驗能達到一樣呢讓我們先來看一組對比京東對比京東在頁中，手指接觸到列表項時，列表項沒有任何反應。代碼如下經過反復測試，得出結論如下安卓機型上觸發反饋會有延遲。
要說互聯網發展趨勢，必然會提及一個詞匯：H5。從H5游戲，H5站點，H5營銷等等。H5跨平臺的特性極大地降低了開發成本和推廣難度，同時也帶來了一個問題： 如何讓h5的體驗能達到app一樣呢？讓我們先來看一組對比(京東APP對比京東H5)：
在h5頁中，手指接觸到列表項時，列表項沒有任何反應。而在app中，手指剛接觸到列表項時，列表項則從白色背景變為灰色背景。這種交互反饋幾乎可以在所有移動端APP中看見，甚至可以說，交互反饋已經成為一種用戶習慣。相較之下，h5頁雖然有著跨平臺的優勢，但在細節處理上就差了很多，并且這種交互反饋h5并沒有原生支持。react native官方文檔有這么一段介紹：
Tappable Components
Tappable components should provide feedback that show the user what is handling their touch, and what will happen when they lift their finger. The user should also be able to cancel a tap by dragging their finger away.
這段介紹主要是說，原生APP組件中，“可點擊組件”就應該對用戶的操作做出及時反饋。下面一段話更是直接指出了為什么"web" app doesn"t feel "native"。
TouchableWithoutFeedback
Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn"t feel "native".
綜上所述，我們在開發h5頁面的時候，很有必要給頁面一些可點擊元素加上一些觸摸反饋，這樣可以大幅度提升頁面的整體體驗，使h5頁體驗更為接近APP。去哪網的h5首頁便是這么做的:
那么，如何在頁面上加入這樣的反饋呢？目前了解到的有三種方案，總結如下：
active 偽類這種方式大多數前端童鞋都能聯想到，因為PC web就是這樣定義這種反饋的，那么在移動端，這個方案如何呢？我們先來看看w3c對:active的定義：
the-user-action-pseudo-classes-hover-act
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.
可以看到，w3c標準里對它的描述都是基于mouse事件的，完全沒有說明如何支持touch事件。而正是由于標準對此并沒有一個準確定義，瀏覽器對此的理解和實際支持也是參差不齊。
在實際應用中，active偽類在移動端的表現也不是太好，在ios系統中甚至需要"hack"才能正常使用。若仔細看MDN對active偽類介紹，會發現下面這一段話：
MDN :active
[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the .
也就是說，在iOS中，我們需要綁定一個touchstart事件來激活這一行為。代碼如下：
document.addEventListener("touchstart", function(){});
經過反復測試，得出結論如下:
安卓機型上觸發反饋會有延遲。和click的300ms延遲一樣。
ios上按住反饋元素后再將手指移出元素，反饋效果依然還在。(正常情況，手指移出元素應當取消反饋效果)
測試demo: http://www.dearhaoge.com/touchFeedback/demo/delay-test.html
a 標簽包裹在移動端，有個還在草案中的屬性-webkit-tap-highlight-color，定義了點擊一個超鏈接顯示的顏色。MDN上描述如下：
-webkit-tap-highlight-color
-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it"s being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they"re tapping on.
所以，我們可以在需要反饋的元素上包裹一層a標簽，然后設置這個屬性。缺點是只能設置顏色和透明圖(rgba)。如果想要設置一些動畫效果(比如去哪網首頁的縮放效果)，這個方案也是不適用的。
自定義添加 class第三個方法通過自定義touch事件來觸發反饋，具體方法如下文所示：
在touchstart觸發的時候，給元素加上class(比如圖中是波紋效果)并且在手指持續放在元素上的時候保持class不被移除。
touchmove移出元素或者觸發滾動條時移除class。當然,touchend和touchcancel也必須移除反饋class。
總結如果只是想要簡單實現的話，可以選擇前兩種方案，配置相對簡單。追求良好體驗的童鞋推薦第三種方案，第三種方案整體思想不是很復雜，但也不能對所有的交互元素都多帶帶配置一次，這樣也有失代碼的優雅。
經過思考和折騰，本人提出了一個方案-->touchFeedback.js，在用戶體驗和開發體驗之間取了一個平衡，這里是一些使用touchFeedback.js做的反饋效果(PC需要模擬手機查看)：一些有趣的反饋效果
項目地址： https://github.com/backToNature/touchFeedback
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111542.html
摘要：跨平臺的特性極大地降低了開發成本和推廣難度，同時也帶來了一個問題如何讓的體驗能達到一樣呢讓我們先來看一組對比京東對比京東在頁中，手指接觸到列表項時，列表項沒有任何反應。代碼如下經過反復測試，得出結論如下安卓機型上觸發反饋會有延遲。 showImg(https://segmentfault.com/img/bVCXXT); 要說互聯網發展趨勢，必然會提及一個詞匯：H5。從H5游戲，H5站...
摘要：跨平臺的特性極大地降低了開發成本和推廣難度，同時也帶來了一個問題如何讓的體驗能達到一樣呢讓我們先來看一組對比京東對比京東在頁中，手指接觸到列表項時，列表項沒有任何反應。代碼如下經過反復測試，得出結論如下安卓機型上觸發反饋會有延遲。 showImg(https://segmentfault.com/img/bVCXXT); 要說互聯網發展趨勢，必然會提及一個詞匯：H5。從H5游戲，H5站...
摘要：保利威無延遲直播可以在手機電腦上實現高參與度的互動，讓課堂體驗再上一層，對于提升公開課轉化率非常有幫助。無延遲體驗能讓直播更接近線下體驗。 ? ? 衡量一場直播是否成功，用戶互動體驗必然是關鍵一環。 ? 今年疫情影響下，云辦公、云上課、云會展、云購物紛紛興起。帶貨直播、空中課堂、會展直播等多樣化的場景讓用戶對直播實時性、流暢性有了更高要求。 ? ...
摘要：，一個專注于移動，開箱即用的可視化解決方案，完美支持環境同時兼容多種環境小程序，。專業的移動設計指引為你帶來最佳的移動端圖表體驗?；?，移動端可視化圖表庫。 showImg(https://segmentfault.com/img/remote/1460000016176811?w=1600&h=440); F2，一個專注于移動，開箱即用的可視化解決方案，完美支持 H5 環境同時兼容多...
閱讀 2653·2023-04-25 15:22
閱讀 2823·2021-10-11 10:58
閱讀 1043·2021-08-30 09:48
閱讀 1850·2019-08-30 15:56
閱讀 1728·2019-08-30 15:53
閱讀 1089·2019-08-29 11:16
閱讀 1047·2019-08-23 18:34
閱讀 1637·2019-08-23 18:12
