移动web端模拟hover效果

hover在PC端的用户体验中扮演着很重要的角色，那么移动web端我们又该如何增强这方面的用户体验呢？

下面我简单的在移动web端模拟了下hover的效果。

效果预览

请在移动端打开 源码

核心代码

//按钮点击效果
$(document).on("touchstart", ".action-btn:not(.disable)", function (e) {
    var $this = $(this);
    var flag = true;
    //遍历子类
    $this.find("*").each(function () {
        //查看有没有子类触发过active动作
        if ($(this).hasClass("active")) flag = false;
    });
    //如果子类已经触发了active动作，父类则取消active触发操作
    if (flag) $this.addClass("active");

});
$(document).on("touchmove", ".action-btn:not(.disable)", function (e) {
    if ($(this).hasClass("active")) $(this).removeClass("active");
});
$(document).on("touchend", ".action-btn:not(.disable)", function (e) {
    if ($(this).hasClass("active")) $(this).removeClass("active");
});

代码是基于jQuery的

实现原理

基于touchstart、touchmove、touchend这三个事件，动态增删class。

默认只对含有action-btn class且不含有disable class的对象生效

使用方法

场景1

普通列表点击

<ul class="items">
    <li class="action-btn">item1</li>
    <li class="action-btn active">item2</li>
    <li class="action-btn">item3</li>
    <li class="action-btn">item4</li>
    <li class="action-btn">item5</li>
</ul>

只需要给列表添加上action-btn class以及提供相应的active class。

场景2

复杂列表点击

<ul class="items">
    <li class="action-btn">
        item0
        <span class="action-btn action-delete">X</span>
    </li>
    <li class="action-btn">item1</li>
    <li class="action-btn">item2</li>
    <li class="action-btn">item3</li>
    <li class="action-btn">item4</li>
</ul>

效果：点击列表时，触发列表点击效果，点击小叉时，触发小叉点击效果，小叉所在列不触发点击效果。

注意：无论小叉是否有点击效果（即active class），都需要给小叉添加action-btn class。即：当列和列的子元素都有点击逻辑的时候，都需要给它们添加action-btn class，否则会触发父类元素的点击效果。

其他

上面只是在移动web端对hover进行了简单的模拟，还有很多不足的地方。例如：当用户滑动列表时，滑动开始触点所在的列的点击效果会一闪而过。这个是因为点击效果的触发条件是touchstart。我也有尝试在触发touchstart时，延迟一定时间后判断是否触发过touchmove，没有触发的话才触发点击效果。但是在android上表现不佳，所以没有贴出类。

后续我会结合我的这篇文章10行代码搞定移动web端自定义tap事件中的tap事件进行效果优化。

文章有什么不对的地方，望大家指正。大家有什么好的实现方法，欢迎交流！