移动端点击态的处理

在开发移动端页面的时候，为了提高用户体验，通常会给被触控的元素加上一个效果来对用户的操作进行反馈，这种反馈主要有三种实现方式:

伪类:active

伪类是一种比较方便的实现方式，但在 ios 中，需要在相关的元素或者 body 上绑定 touchstart
事件才能使元素的 :active 生效

document.body.addEventListener('touchstart', function (){});

也可以直接在 body 上添加

<body touchstart>
    <!-- ... -->
</body>

此外，由于移动端 300ms 延迟问题，触摸反馈会有延迟，可以使用 Fastclick 解决

局限性：
仅当轻触时有效，当长按时只是动画闪动，无法实现点击时触发动画，离开时取消动画的效果

-webkit-tap-highlight-color

这个属性并不是标准的，被用于设置超链接被点击时高亮的颜色，在ios设备上表现为一个半透膜的灰色背景，可以设置-webkit-tap-highlight-color为任何颜色，例如rgba(0,0,0,0.5)，如果未设置颜色的alpha值，将使用默认的透明度，alpha为0时，将禁用高亮，alpha为1时，元素在点击时将不可见，大部分安卓设备也支持这个属性，但是显示的效果不同，表现为一个边框，-webkit-tap-highlight-color的值为边框的颜色

局限性：
必须将需要设置点击效果的元素使用a标签包裹，而且在安卓一些机型上存在兼容

touch事件

原理就是touchstart时，给元素添加className，touchstend时移除className
仅需给需要效果的元素添加 data-touch="true"，css中有对应的.active即可

<!-- 省略 -->
<li data-touch="true">
点我
</li>
<!-- 省略 -->
<script>
    // 点击时添加.active效果
    document.body.addEventListener('touchstart', function(e){
        var target = e.target
        if(target.dataset.touch === 'true'){
            target.classList.add('active')
        }
    });
    
    // 移动时判断触点是否在元素范围内
    document.body.addEventListener('touchmove', function(e){
        var target = e.target,
            rect = target.getBoundingClientRect()
        if(target.dataset.touch === 'true'){
            // 移出元素时，取消active状态
            if(e.changedTouches[0].pageX<rect.left || e.changedTouches[0].pageX>rect.right || e.changedTouches[0].pageY<rect.top || e.changedTouches[0].pageY>rect.bottom){
                target.classList.remove('active')
            }
        }
    });
    
    // 触摸结束或取消时去掉效果
    document.body.addEventListener('touchcancel', function(e){
        var target = e.target
        if(target.dataset.touch === 'true'){
            target.classList.remove('active')
        }
    })
    document.body.addEventListener('touchend', function(e){
        var target = e.target
        if(target.dataset.touch === 'true'){
            target.classList.remove('active')
        }
    })
</script>

转载自：移动端点击态处理

移动端点击态的处理

相关推荐