Javascript 鼠标删除/输入绑定/取消绑定逻辑

我正在尝试为表单构建一个简单的脚本。当用户将鼠标悬停在容器div上时，脚本将显示表单。然后我想检查用户是否单击了任何表单输入，如果没有，表单将隐藏。如果输入或文本区域处于焦点，我将解除鼠标的绑定。如果用户希望在此时关闭表单，则需要单击关闭按钮

我现在的问题是，在焦点中有一个输入并关闭表单后，在下一次悬停时表单不会隐藏。我必须再次单击关闭按钮。当用户单击“关闭”时，如何“重置”或禁用鼠标移动解除绑定

这是脚本的相关部分：

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

---

就个人而言，我不喜欢使用.hover或.on。我用的是.mouseenter和.mouseleave。然后，如果您只是创建一个.mouseenter，就不会有代码将其恢复到未聚焦状态。以下是一个例子：

$（“#某物”）.mouseenter（函数（）{ $（此）。设置动画({ //一些css之类的。 }) }) 只要你不把鼠标移开，它就不会不聚焦

---

首先，有点离题：我建议不要在

：focus

中检查

输入。对于您描述的场景，更好的方法是：

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


对于解除绑定事件处理程序时遇到的问题，您可以在form close上重新附加它：

$(".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')) {

不需要解开鼠标套。只要输入有焦点，就不要在mouseleave上做任何事情。大体上在mouseleave上，如果窗体未处于焦点，请关闭窗体。嗯，这是一个快速修复方法，谢谢！：）