Question

我有一个基本的JS抽认卡游戏。有12个“答案按钮”供用户选择。

在移动设备上，点按后，接听按钮将保持悬停效果/焦点（？）（在台式机和任何浏览器上均不会发生）。从用户的角度来看，这非常令人困惑，因为它看起来好像是应用程序/闪存卡被卡住或未更新。

我正在使用Bootstrap 4.1。

这是我的按钮代码，但没有什么不寻常的地方：

<button type="button" id="E" class="btn btn-lg btn-info ansBtn" value="E">Answer</button>

我看过类似的问题（但它们与引导3有关），建议使用锚标签而不是按钮标签，但这不起作用（带有和不带有href属性）。

我还尝试了另一种建议来包括这部分jQuery，但它似乎也不适用于4.1。我已经使用了按钮ID和其他类名，但是没有用。

 $(".btn").mouseup(function(){
     $(this).blur();
 });

建议？谢谢！

更新

所以这是最新的。我添加了以下CSS。这给移动用户带来了我想要的体验（仅在单击/点击时背景颜色/边框颜色会“闪烁”）。但是，现在将Macbook Pro和触控板一起使用时，效果不会发生！当我用触控板单击但不用触控板点击时，它可以工作。：（

.btn.btn-info {
    background-color: #17a2b8
} 

.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active, 
.show > .btn-info.dropdown-toggle {
     background-color: #117a8b;
     border-color: #10707f;
 }

Answer 1

您始终可以在对象.onHover()或.onClick()事件上添加.focus()函数。这将使您的抽认卡在一定时间后翻转/模糊。另外，您只需更改应用程序的功能以用于移动浏览器，然后进行更改，因此您必须单击以查看答案。您还应该研究document.querySelector(".btn").onmouseup = function(){ this.blur(); });方法，并可能尝试将焦点更改为页面上的另一个元素。如果以上方法均无效，则可能与jQuery有关。我建议尝试以这种方式选择元素：

document.querySelector(".btn").onmouseup = function(){ document.body.focus(); });

或：

http[s]*:\/\/www.*[.]([^\s]+)

轻触手机后，移除按钮悬停效果？

1 个答案: