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

Question

试图找出如何将按钮重置回“未触摸”状态。我使用按钮作为：

    <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 上）“下一个”或“上一个”时，它会运行我编写的 JavaScript 函数，然后按钮保持永久活动、悬停或聚焦（不确定状态）。

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

我试过了：

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

还

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

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

Answer 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;
  }
}