摘要：跨平臺(tái)的特性極大地降低了開(kāi)發(fā)成本和推廣難度，同時(shí)也帶來(lái)了一個(gè)問(wèn)題如何讓的體驗(yàn)?zāi)苓_(dá)到一樣呢讓我們先來(lái)看一組對(duì)比京東對(duì)比京東在頁(yè)中，手指接觸到列表項(xiàng)時(shí)，列表項(xiàng)沒(méi)有任何反應(yīng)。代碼如下經(jīng)過(guò)反復(fù)測(cè)試，得出結(jié)論如下安卓機(jī)型上觸發(fā)反饋會(huì)有延遲。

要說(shuō)互聯(lián)網(wǎng)發(fā)展趨勢(shì)，必然會(huì)提及一個(gè)詞匯：H5。從H5游戲，H5站點(diǎn)，H5營(yíng)銷等等。H5跨平臺(tái)的特性極大地降低了開(kāi)發(fā)成本和推廣難度，同時(shí)也帶來(lái)了一個(gè)問(wèn)題： 如何讓h5的體驗(yàn)?zāi)苓_(dá)到app一樣呢？讓我們先來(lái)看一組對(duì)比(京東APP對(duì)比京東H5)：

在h5頁(yè)中，手指接觸到列表項(xiàng)時(shí)，列表項(xiàng)沒(méi)有任何反應(yīng)。而在app中，手指剛接觸到列表項(xiàng)時(shí)，列表項(xiàng)則從白色背景變?yōu)榛疑尘啊＿@種交互反饋幾乎可以在所有移動(dòng)端APP中看見(jiàn)，甚至可以說(shuō)，交互反饋已經(jīng)成為一種用戶習(xí)慣。相較之下，h5頁(yè)雖然有著跨平臺(tái)的優(yōu)勢(shì)，但在細(xì)節(jié)處理上就差了很多，并且這種交互反饋h5并沒(méi)有原生支持。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.

這段介紹主要是說(shuō)，原生APP組件中，“可點(diǎn)擊組件”就應(yīng)該對(duì)用戶的操作做出及時(shí)反饋。下面一段話更是直接指出了為什么"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".

綜上所述，我們?cè)陂_(kāi)發(fā)h5頁(yè)面的時(shí)候，很有必要給頁(yè)面一些可點(diǎn)擊元素加上一些觸摸反饋，這樣可以大幅度提升頁(yè)面的整體體驗(yàn)，使h5頁(yè)體驗(yàn)更為接近APP。去哪網(wǎng)的h5首頁(yè)便是這么做的:

那么，如何在頁(yè)面上加入這樣的反饋呢？目前了解到的有三種方案，總結(jié)如下：

這種方式大多數(shù)前端童鞋都能聯(lián)想到，因?yàn)镻C web就是這樣定義這種反饋的，那么在移動(dòng)端，這個(gè)方案如何呢？我們先來(lái)看看w3c對(duì):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標(biāo)準(zhǔn)里對(duì)它的描述都是基于mouse事件的，完全沒(méi)有說(shuō)明如何支持touch事件。而正是由于標(biāo)準(zhǔn)對(duì)此并沒(méi)有一個(gè)準(zhǔn)確定義，瀏覽器對(duì)此的理解和實(shí)際支持也是參差不齊。

在實(shí)際應(yīng)用中，active偽類在移動(dòng)端的表現(xiàn)也不是太好，在ios系統(tǒng)中甚至需要"hack"才能正常使用。若仔細(xì)看MDN對(duì)active偽類介紹，會(huì)發(fā)現(xiàn)下面這一段話：

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 .

也就是說(shuō)，在iOS中，我們需要綁定一個(gè)touchstart事件來(lái)激活這一行為。代碼如下：

document.addEventListener("touchstart", function(){});

經(jīng)過(guò)反復(fù)測(cè)試，得出結(jié)論如下:

安卓機(jī)型上觸發(fā)反饋會(huì)有延遲。和click的300ms延遲一樣。

ios上按住反饋元素后再將手指移出元素，反饋效果依然還在。(正常情況，手指移出元素應(yīng)當(dāng)取消反饋效果)

測(cè)試demo: http://www.dearhaoge.com/touchFeedback/demo/delay-test.html

在移動(dòng)端，有個(gè)還在草案中的屬性-webkit-tap-highlight-color，定義了點(diǎn)擊一個(gè)超鏈接顯示的顏色。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標(biāo)簽，然后設(shè)置這個(gè)屬性。缺點(diǎn)是只能設(shè)置顏色和透明圖(rgba)。如果想要設(shè)置一些動(dòng)畫(huà)效果(比如去哪網(wǎng)首頁(yè)的縮放效果)，這個(gè)方案也是不適用的。

第三個(gè)方法通過(guò)自定義touch事件來(lái)觸發(fā)反饋，具體方法如下文所示：

在touchstart觸發(fā)的時(shí)候，給元素加上class(比如圖中是波紋效果)并且在手指持續(xù)放在元素上的時(shí)候保持class不被移除。

touchmove移出元素或者觸發(fā)滾動(dòng)條時(shí)移除class。當(dāng)然,touchend和touchcancel也必須移除反饋class。

如果只是想要簡(jiǎn)單實(shí)現(xiàn)的話，可以選擇前兩種方案，配置相對(duì)簡(jiǎn)單。追求良好體驗(yàn)的童鞋推薦第三種方案，第三種方案整體思想不是很復(fù)雜，但也不能對(duì)所有的交互元素都多帶帶配置一次，這樣也有失代碼的優(yōu)雅。

經(jīng)過(guò)思考和折騰，本人提出了一個(gè)方案-->touchFeedback.js，在用戶體驗(yàn)和開(kāi)發(fā)體驗(yàn)之間取了一個(gè)平衡，這里是一些使用touchFeedback.js做的反饋效果(PC需要模擬手機(jī)查看)：一些有趣的反饋效果

項(xiàng)目地址： https://github.com/backToNature/touchFeedback