移动端点击状态的处理

在开发移动端页面时，为了提升用户体验，通常会在被触摸的元素上添加一个效果，对用户的操作进行反馈。这个反馈的实现方式主要有3种：伪类：active伪类是一种比较方便的实现方式，但是在ios中，需要在相关元素或者body上绑定touchstart事件，让元素的:active生效document.body.addEventListener('touchstart',function(){});也可以直接在body上添加另外由于移动端300ms延迟问题，触摸反馈会延迟，Fastclick可以用于解决限制：只有轻触时有效，长按时只有动画闪烁，点击时无法触发动画，离开时取消动画效果-webkit-tap-highlight-color这个属性没有standard，用于设置点击超链接时的高亮颜色，在ios设备上表现为半透灰色背景，可以设置-webkit-tap-highlight-color为任意颜色，如rgba(0,0,0,0.5)，如果没有设置颜色的alpha值，将使用默认的透明度。当alpha为0时，高亮将被禁用。当alpha为1时，元素在单击时将不可见。大多数Android设备也支持这个属性，但是显示效果不同，作为边框，-webkit-tap-highlight-color的值就是边框的颜色。局限性：需要设置点击效果的元素必须用标签包裹，部分安卓机型有兼容的触摸事件。原理是在touchstart的时候给元素加上cla??ssName。touchstend时去掉className只需要在需要效果的元素上加上data-touch="true"即可，css中有对应的.active。点我转载自：移动端点击状态处理