Javascript 使元素在jquery中失去焦点

我有一个类为“scrollToTop”的按钮，单击该按钮时会滚动到页面顶部。以下是js文件：

$(document).ready(function(){

  //Check to see if the window is top if not then display button
  $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('.scrollToTop').fadeIn();
    } else {
        $('.scrollToTop').fadeOut();
    }
  });

  //Click event to scroll to top
  $('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
  });


});

因此，此按钮还具有：hover属性：

.scrollToTop:hover{
  opacity: 1.0;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 8px 8px rgba(0,0,0,0.22);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

现在，我们都知道：hover在移动设备中不起作用，即1）你必须点击按钮将不透明度更改为1.0&2）你必须点击其他地方才能将不透明度更改回原来的水平（比如0.5）

---

在这里，我想模拟第二部分。我想编辑jquery，这样当页面滚动到顶部时，scrollToTop会自动失去焦点，从而失去：hover效果，其不透明度自动返回到0.5，而用户无需点击其他位置。我希望我说清楚了。这可能吗？如果没有，还有其他方法可以得到同样的结果吗？提前谢谢

如果我没弄错，我想你需要使用：

 $('.scrollToTop').blur();

所以你可以把它放在：

$('.scrollToTop').click(function(){
    // Remove focus from the button
    $('.scrollToTop').blur();
    $('html, body').animate({scrollTop : 0},800);        
    return 
});

或者，另一个StackOverflow建议使用ontouchend事件，然后删除元素并将其重新附加到dom：

$('.scrollToTop').on('touchend', function(){
    var el = this;
    var par = el.parentNode;
    var next = el.nextSibling;
    par.removeChild(el)
    setTimeout(function() {
        par.insertBefore(el, next);
    },0);
});

---

我认为你可以把注意力集中在另一个元素上。我认为要处理所有类型的设备，你最好切换一个类，而不是使用伪类

：hover

。缺点是关于mouseenter/mouseleave的逻辑需要使用js/jquery来处理。但这将允许您在需要时删除该类。现在我想知道是否设置

，然后设置

document.body.focus（）是否有效？！其他尝试方法是删除/读取
scrollToTop
类。例如，在click处理程序内部：
$（this）.removeClass（'scrollToTop'）.addClass（'scrollToTop'）。我的最后一个想法是强制重画，例如，仍在单击处理程序中：
$（this）.hide（）.show（0）