如何清除触摸屏“触摸”按钮焦点、活动、悬停答案

【问题标题】：How to clear touch screen "touched" button focus, active, hover如何清除触摸屏“触摸”按钮焦点、活动、悬停
【发布时间】：2015-12-27 15:13:27
【问题描述】：

试图弄清楚如何将按钮重置为“未触摸”状态。我正在使用一个按钮：

    <div id="service-control-buttons" data-role="controlgroup" data-type="horizontal">
        <a href="#" id="service-previous" data-role="button" data-icon="arrow-l">Prev</a>
        <a href="#" id="service-next" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
    </div>

当我（在我的 iPad 上）点击 Next 或 Prev 时，它会运行我编写的 javascript 函数，然后按钮保持永久活动、悬停或聚焦（不确定状态）。

我的目标：在 javascript 函数运行后，我想将按钮重置为未激活、未悬停或未聚焦状态。当然，这不会发生在非触摸屏鼠标点击上。

我试过了：

$(another-selecter).focus();
$(another-selecter).click();
$('#service-next').blur();

还有

$('#service-next').css('background-color', 'original-color')

有效，但当然，这完全是突出显示的结束，我不希望这样。我不想手动设置 css，因为我使用的主题将来可能会改变，并且希望尽可能避免黑客攻击。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

为防止这种情况，您可以使用 CSS 文件中的以下 @media 自定义触摸屏的悬停效果。

@media (hover: none) and (pointer: coarse) {
   /* Add hover styles here */
}

用例示例

假设我们有一个 ID 为 btn-one 的按钮，它的背景颜色是透明的，但悬停效果会将其变为红色。

通过应用下面的代码，当使用触摸设备的用户与应用交互时，@media 将触发样式更改。在悬停时保持背景颜色透明。这样我们就可以防止按钮出现粘滞行为。

相反，如果设备不是触摸屏，则悬停样式将像此 @media 不存在一样工作，因此通常悬停时背景颜色会发生变化。

@media (hover: none) and (pointer: coarse) {
  #btn-one:hover {
    background-color: transparent!important;
    color: black;
  }
}

【讨论】：