单击后，移动设备上的“提交”按钮不会失焦

Question

我有一个关注但在我的网站上点击时通过ajax更新数据库。

成功返回后，我更改按钮的类别以显示不同的背景颜色。

这适用于台式机，但在移动设备上，提交按钮仍处于活动状态/有悬停操作。

当悬停提交时，我的悬停事件只会使用css：hover更改背景颜色。

div具有与悬停它时相同的颜色，但在ajax响应改变了类之后。

希望到目前为止有道理。

所以我提交了一份表格：

<form>
  <input type="submit" id="followsubmit" class="followbuttonNO">
</form>

正确答案：

if (response.followSuccess) {
  $('#followsubmit').attr('class', 'followbuttonYES');
}

在桌面上，此代码会更改类和按钮背景颜色的更改（因为类具有不同的背景颜色......）但在移动设备上按钮会转到悬停效果css的颜色。

如果我单击提交按钮，然后在响应之前按下页面上的任何其他位置，那么它可以正常工作。

TLDR;如何在ajax调用后使表单提交按钮无法聚焦？我试过.blur（）但是没有用。

谢谢！

Answer 1

你必须记住，将hover用于触摸屏是很棘手的，因为:hover伪类会查找指向和选择/激活的动作。因此，在触摸屏上，点击的动作基本上等同于悬停。因此，当您单击提交按钮时，它会一直悬停，直到您取消选择它。

解决此问题的一种方法是移动/触摸屏设备进行点击操作，并使用setTimeout()短计时器并更改类。

我知道你说你试过.blur()，但我不确定你是怎么尝试的。您需要设置模糊功能，然后激活触发器。看看下面......

$('#followsubmit').blur(function(){
    //blur action
});

elsewhere...

$('#followsubmit').trigger('blur'); //execute blur action

Answer 2

即使您说blur不起作用，也必须有效。在将任何其他函数绑定到锚点或输入字段之前，只需添加：

$('a, input').on('click', function(
    $(this).blur();
});

Answer 3

我也遇到了这个问题，几小时后，我通过CSS媒体查询解决了这个问题：

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}