讓一個元素失去焦點在jquery

我有一個按鈕類「scrollToTop」滾動到頁面的頂部點擊。這裏的js文件：讓一個元素失去焦點在jquery

$(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）。

在這裏，我想模擬第二部分。我想編輯jquery，當頁面滾動到頂部時，scrollToTop會自動失去焦點，這樣它就會失去：懸停效果，並且其不透明度會自動返回到0.5，而用戶不必在其他位置點擊。我希望我明確自己。這可能嗎？如果不是，還有其他方法可以獲得相同的結果嗎？提前致謝！

來源

2016-06-28 Arif

我認爲你可以專注於另一個元素ENT。 –

我認爲要使用所有類型的設備，您最好切換一個類而不是使用僞類'：hover'。缺點是關於mouseenter/mouseleave的邏輯需要使用js/jquery來處理。但是，這可以讓你在需要時刪除課程。現在我想知道是否設置''然後'document.body.focus（）;'會工作嗎？ –

其他想法嘗試，刪除/ readd'scrollToTop'類。例如，在點擊處理程序中：'$（this）.removeClass（'scrollToTop'）。addClass（'scrollToTop'）;'。我最後一個想法是強制重繪，例如仍然在點擊處理中：'$（this）.hide（）。show（0）;' –

如果我有這個權利，我認爲你需要使用：

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

所以，你可以把它放在：

$('.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); 
});

來源

2016-06-28 11:41:28

讓一個元素失去焦點在jquery

回答

相關問題