要说互联网发展趋势，必然会说起一个辞汇：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:activepseudo-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,:activeapplies 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:activestate unless there is atouchstartevent handler on the relevant element or on the<body>.
也就是说，在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-coloris 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须要模拟手机检察)：一些风趣的反应结果
