Javascript 如何在移动浏览器中将按钮返回到非活动状态

在触摸屏设备上，按下HTML按钮后，如何将其返回到非活动状态？悬停和活动伪选择器当前的样式相同：

button.largeButton {
    font-size:15px;
    padding:0 18px;
    height:36px;
    background:#fff;
    border:none;
    border:2px solid #1a1a1a;
    box-shadow:0 0 6px rgba(0,0,0,0.18), inset 0 0 6px rgba(0,0,0,0.18);
    letter-spacing:1px;
    color:#1a1a1a;
    border-radius:1px;
    -webkit-transition: all 0.09s ease-out;
       -moz-transition: all 0.09s ease-out;
         -o-transition: all 0.09s ease-out;
            transition: all 0.09s ease-out;
}

button.largeButton:hover,
button.largeButton:active {
    background:#1a1a1a;
    color:#fff;
    box-shadow: inset 0 0 9px rgba(255,255,255,0.18);
    -webkit-transition: all 0.09s ease-out;
       -moz-transition: all 0.09s ease-out;
         -o-transition: all 0.09s ease-out;
            transition: all 0.09s ease-out;
    border-color:#333;
}

只使用CSS的解决方案更可取，但JS/jQuery也可以。

也许您应该尝试将类名分离为active/hover

button.largeButton:hover,
button.largeButton:active {...}

可能成为

button.activeButton:hover,
button.activeButton:active {...}

单击按钮后，该类将被删除

示例html

<button class="activeButton largeButton">

---

不幸的是，没有纯粹的css方法可以做到这一点。最好的方法是使用

：visted

，但是，这是不可能的，因为

注意：出于隐私原因，浏览器严格限制使用此伪类选择的元素可以应用的样式：仅颜色、背景颜色、边框颜色、边框底色、边框左颜色、边框右颜色、边框顶颜色、轮廓颜色、列规则颜色、填充和笔划。还要注意，alpha组件将被忽略：取而代之的是未访问规则的alpha组件（不透明度为0时除外，在这种情况下，将忽略整个颜色，并使用未访问规则中的一种）。 -

---

不幸的是，据我所知，没有任何方法能够在点击后返回到非活动状态

$('.largeButton').click(function() { $(this).blur(); });

---

这会禁用按钮-我仍然希望它是可点击的，我只是不希望它有悬停/活动的外观。抱歉，如果我没有正确解释我自己。这种方法更好（我习惯于在按下几毫秒后启动，而不是打开）但也不太管用-在mobile safari中按时会出现闪烁，CSS转换被覆盖。我想我明天可能需要重新处理此问题。@verism-要解决此问题，您可能需要使用此选项：

-webkit轻触元素上的高亮颜色：transparent

。请参见此答案：

$('.largeButton').click(function() { $(this).blur(); });