我正在尝试为表单构建一个简单的脚本。当用户将鼠标悬停在容器div上时,脚本将显示该表单。然后我想检查用户是否点击任何表单输入,如果不是表单将隐藏。如果输入或文本区域是焦点,我取消绑定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");
}
});
答案 0 :(得分:0)
就个人而言,我不想使用.hover或.on。我使用.mouseenter和.mouseleave。然后,如果你只是创建一个.mouseenter,那么就没有代码可以将它重新置于未聚焦状态。这是一个例子:
$("#东西&#34)。的mouseenter(函数(){ $(本).animate({ //某些css或其他什么。 }) }) 只要你不放一个.mouseleave,它就不应该失焦。
答案 1 :(得分:0)
首先,有点偏离主题:我建议不要在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')) {