移動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事件進行效果優化。

文章有什麼不對的地方，望你們指正。你們有什麼好的實現方法，歡迎交流！