如果说到互联网的发展趋势，就不得不提一个词：H5。来自H5游戏、H5网站、H5营销等。H5的跨平台特性大大降低了开发成本和推广难度，但也带来了一个问题：如何让H5的体验达到与APP同等水平？先来看一组对比（京东APPvs.京东H5）：在h5页面，手指触摸列表项，列表项没有反应。在应用程序中，当手指第一次触摸列表项时，列表项从白色背景变为灰色背景。这种交互反馈在几乎所有的移动应用程序中都可以看到。甚至可以说，互动反馈已经成为一种用户习惯。相比之下，h5页面虽然有跨平台的优势，但是在细节上就差了很多，而且这种交互反馈h5也没有原生支持。官方的ReactNative文档有这样的介绍：TappableComponentsTappablecomponentsshouldprovidefeedbackthatshowtheuserwhatishandlingtheirtouch,andwhatwouldhappenwhentheylifetheirfinger.用户还应该能够通过拖开手指来取消点击。这里的介绍主要是指在原生APP组件中，“可点击组件”应该对用户的操作进行及时的反馈。下面这段话直接指出了为什么“web”app感觉不到“native”。TouchableWithoutFeedback除非你有很好的理由，否则不要使用。所有响应按下的元素在触摸时都应该有视觉反馈。这是“网络”应用感觉不像“原生”的主要原因之一，我们在开发h5页面的时候，需要在页面的一些可点击的元素上添加一些触摸反馈，这样可以大大提升页面的整体体验，让h5页面的体验更接近APP。去哪儿网的h5首页是这样做的：那么，如何在页面上添加这样的反馈呢？目前有3种方案，总结如下：主动伪类可以关联大部分前端童鞋，因为PCweb是这样定义这种反馈的，那么移动端这个方案怎么样终端？让我们看一下w3c对:active的定义：the-user-action-pseudo-classes-hover-actThe:active伪类在用户激活元素时应用。例如，在用户按下鼠标按钮和释放鼠标按钮之间。在具有多个鼠标按钮的系统上，:active仅适用于主要或主要激活按钮（通常是“鼠标左键”）及其任何别名。可以看到，w3c标准支持其描述是基于鼠标事件的，根本没有说明如何支持触摸事件。正是因为标准没有对this进行准确的定义，浏览器对this的理解和实际支持也参差不齐。在实际应用中，active伪类在移动端的表现并不是很好，甚至需要“hack”才能在ios系统中正常工作。如果你仔细看MDN对active伪类的介绍，你会发现下面这段话：MDN:active[1]默认情况下，SafariMobile不使用:active状态，除非相关元素上有touchstart事件处理程序或在
上。也就是说，在iOS中，我们需要绑定一个touchstart事件来激活这个行为。代码如下：document.addEventListener('touchstart',function(){});经过反复测试，结论如下：Android机型触发反馈会延迟。与click的300ms延迟相同。ios上长按反馈元素然后手指移出元素，反馈效果依旧。（一般情况下手指移出元素应该取消反馈效果）测试demo：http://www.dearhaoge.com/touchFeedback/demo/delay-test.html一个标签包裹在移动端，草稿中还有一个属性——webkit-tap-highlight-color，定义了点击超链接时显示的颜色。MDN是这样描述它的：-webkit-tap-highlight-color-webkit-tap-highlight-color是一个非标准的CSS属性，它设置链接被点击时出现在链接上的高亮颜色。突出显示向用户表明他们的点击已被成功识别，并指示他们正在点击哪个元素。所以，我们可以在需要反馈的元素上包裹一层标签，然后设置这个属性。缺点是只能设置颜色和透明度贴图（rgba）。如果你想设置一些动画效果（比如去哪儿网首页的缩放效果），这个方案就不适用了。自定义添加类第三种方法通过自定义触摸事件触发反馈。具体方法如下：当触发touchstart时，给元素添加一个class（如图中的涟漪效果），手指一直放在元素上，保持class在up时不被移除。当touchmove移出元素或触发滚动条时移除该类。当然touchend和touchcancel也必须去掉feedback类。总结如果只是想要简单的实现，可以选择前两个选项，配置比较简单。追求好的体验的童鞋推荐第三种方案。第三种方案的整体思路不是很复杂，但是不能对所有的交互元素进行一次配置，也有漏码的优雅。经过思考和折腾，我提出了一个解决方案-->touchFeedback.js，它在用户体验和开发体验之间取得了平衡。下面是一些使用touchFeedback.js制作的反馈效果（PC需要模拟手机观看）：一些有趣的反馈效果项目地址：https://github.com/backToNature/touchFeedback