jqueryで要素のフォーカスを失うようにする

Question

クリックしたときにページの上部にスクロールするクラス「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; 
    }); 


}); 

だから、このボタンもあります。プロパティを置く：

今

.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; 
} 

、我々はすべて知っているように：ホバーは、モバイルデバイスではうまく動作しません。つまり、1）あなたが持っていますボタンをクリックして不透明度を1.0に変更します& 2）不透明度を前の状態に戻すために別の場所でタップしなければなりません（0.5とします）。

ここでは、2番目の部分をシミュレートしたいと考えています。 jqueryを編集して、ページが上にスクロールされると、scrollToTopが自動的にフォーカスを失うので、：ホバー効果が失われ、不透明度が0.5に自動的に戻ります。私は自分自身を明確にしたいと思う。これは可能ですか？そうでない場合、同じ結果を得る他の方法はありますか？前もって感謝します！

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

だからあなたがそれを置くことができます：私はこの権利を持っていれば

Answer 1

が、私はあなたが使用する必要があると思うまた

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

、別のStackOverflowのquestionは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); 
});