mouseleave /輸入綁定/解除綁定邏輯

我想爲表單創建一個簡單的腳本。該腳本將顯示用戶懸停在容器div上的表單。然後，我想檢查用戶是否單擊任何表單輸入，如果不是表單將隱藏。如果輸入或textarea焦點我解綁定mouseleave。如果用戶想在此時關閉表單，他需要點擊關閉按鈕。mouseleave /輸入綁定/解除綁定邏輯

我現在的問題是，我有一個焦點輸入後，我關閉窗體，在下一個懸停窗體不隱藏。我必須再次點擊關閉按鈕。當用戶點擊關閉時，如何「重置」或禁用鼠標離開取消綁定？

這是腳本的相關部分：

$(".close").on('click', function() { 
    $(".background").removeClass("green"); 
    $(".q-form").hide(); 
    $('.close').hide(); 
}); 

$(".container-background").on('mouseenter', function(){ 
    $('.q-form').show(); 
    $('.close').show(); 
    $('.background').addClass("green"); 
}); 

$(".container-background").on('mouseleave', function() { 
    f ($('#contactForm input').is(':focus')) { 
     $(".container-background").off("mouseleave"); 
      } else { 
       $('.q-form').hide(); 
       $('.close').hide(); 
       $('.background').removeClass("green"); 
      } 
});

來源

2014-06-30 George Grigorita

不需要解除綁定鼠標離開。只要輸入具有焦點，就不要在mouseleave上做任何事情。基本上...在mouseleave上，如果窗體不在焦點關閉窗體。 –

那麼，這是一個快速解決，謝謝！ :) –

首先，一點點偏題：我建議不要檢查input在:focus。你描述的場景更好的辦法是讓：

$(document).on("focus", "#contactForm input", function() { 
    $(".container-background").off("mouseleave"); 
});

至於你有解除綁定事件處理程序的問題，你可以重新連接它的形式接近：

$(".container-background").on("mouseleave", myFunction); 
$(".close").on('click', function() { 
    $(".background").removeClass("green"); 
    $(".q-form").hide(); 
    $('.close').hide(); 
    $(".container-background").off("mouseleave", myFunction) 
           .on("mouseleave", myFunction); 
}); 
var myFunction = function() { 
    // You won't need this condition if you also do what's above 
    if (!$('#contactForm input').is(':focus')) { 
     $('.q-form').hide(); 
     $('.close').hide(); 
     $('.background').removeClass("green"); 
    } 
};

第二個想法你也可以做到這一點，並且根本不需要.off()呼叫：

if (!$('#contactForm input').is(':focus')) {

來源

2014-06-30 17:46:43 blgt

就個人而言，我不喜歡用.hover或。上。我使用.mouseenter和.mouseleave。然後，如果你只是創建一個.mouseenter，那麼就沒有代碼將它放回未聚焦的狀態。這裏有一個例子：

$（「＃東西」）的mouseenter（函數（）{$ （本）.animate（{// 一些CSS或任何 }） }）作爲只要你沒有放置一個.mouseleave，它就不應該放鬆。

來源

2014-06-30 17:45:16 Hoogie

mouseleave /輸入綁定/解除綁定邏輯

回答

相關問題