如何解决如何使用javascript从触摸的元素上移除焦点和悬停?
我有一个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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。