javascript - 如何清除触摸屏 "touched"按钮焦点、事件、悬停

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 上)点击 Next 或 Prev 时，它会运行我编写的 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 不存在一样工作，因此通常悬停时 bg 颜色会发生变化。

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