javascript - 如何使用javascript从触摸的元素中移除焦点和悬停？

Question

我有一个 html 锚点（#play-sound在下面的代码段中），单击或触摸时会播放声音。文本中的文本#play-sound通常为蓝色，但在悬停时变为红色，具有焦点或处于活动状态。

当声音播放完毕后，我会要求blur()它#play-sound恢复为蓝色。预期效果是单击（或触摸）后，文本#play-sound变为红色。声音播放完毕后，它变回蓝色。

这在台式机上运行良好，但在移动设备上它不会变回蓝色。

根据我的阅读，这是因为当被触摸时，移动浏览器会添加一个虚假的悬停状态，#play-sound直到触摸其他东西为止。

我曾尝试在不同的（可点击的）元素上触发click和touchstart，但他们似乎没有从#play-sound.

我可以在声音结束时更改 css 类，以便#play-sound在悬停/焦点/活动时为蓝色（仅适用于移动设备），然后在其他东西获得焦点时立即删除该类，但我觉得必须有更好的方法它。

下面的代码模拟了一秒钟后以超时结束的声音。

document.getElementById('play-sound')
.addEventListener('click', function() {    
  setTimeout(function() {
     document.getElementById('play-sound').blur();
  }, 1000);
});

a {
  color: blue;
  cursor: pointer;
}
a:hover, a:active, a:focus {
  color: red;
}

<a id="play-sound">Play Sound</a>

标签： javascripthtmlmobiletouchblur