jQuery .blur()和.focus()事件的问题

Question

我有一个带有几个输入字段的表单.当用户单击输入字段时,会显示隐藏的div,其中包含该字段的一些选择,然后他们可以选择一个选项,并将其设置为字段值.

目前,div被隐藏的方式是用户选择一个选项.这工作正常,但如果用户不想选择选项,则不会删除div.所以,我的解决方案是在输入字段上使用模糊事件,这将隐藏它们的div元素.这样,用户可以浏览表单,查看隐藏的div,并在离开该字段时隐藏它.这也正常工作.

当他们现在想要从div中点击某些内容以填充到输入中时,问题就出现了.因为我添加了模糊,甚至在用户尝试单击div中的选项时触发,在用户单击之前有效地隐藏div一小段时间,因此不向输入字段添加任何内容.

解决这个问题的最佳方法是什么？我想让blur事件隐藏div,但是当用户想要在div中单击时,需要有某种异常,blur事件不会隐藏他们试图点击的div.

谢谢您的帮助.

Answer 1

您可以在模糊事件上设置超时,并仅在另一个输入字段处于焦点时立即隐藏"帮助div".

像这样的东西:

$("#input1").focus(function() { 
      hideAllHelpers(); $("#helper1").show(); 
});

$("#input1").blur(function() { 
      window.setTimeout(function() { $("#helper1").hide(); },2000); });
});

$("#input2").focus(function() { 
      hideAllHelpers(); $("#helper2").show(); 
});

// etc...

你当然可以使它更通用,它可以使用一些微调,但你明白了......