jQuery.blur（）和.focus（）事件的问题

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

目前，div隐藏的方式是用户选择一个选项。这很好，但是如果用户不想选择一个选项，div将不会被删除。因此，我的解决方案是在输入字段上使用模糊事件，这将隐藏它们的div元素。这样，用户就可以在表单中使用tab键，看到隐藏的div，并在离开该字段时将其隐藏。这也是正确的

当他们现在确实希望单击div中要填充到输入中的内容时，问题就出现了。因为我添加了模糊偶数，当用户试图单击div中的某个选项时，偶数会触发模糊偶数，在用户单击之前，有效地隐藏了div一秒钟，因此不会向输入字段添加任何内容

解决这个问题的最好办法是什么？我想让模糊事件隐藏div，但是当用户想要在div内部单击时，需要有某种例外，模糊事件不会隐藏他们试图单击的div

---

谢谢您的帮助。

只有在另一个输入字段处于焦点时，您才可以设置模糊事件的超时并立即隐藏“help div”

大概是这样的：

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

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

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

// etc...

---

当然，您可以使它更通用，并且可以使用一些微调，但是您得到了这样的想法…

在模糊时，设置一个超时，在隐藏相应的

div之前等待一秒钟。然后，单击一次，清除超时。这里有一个基本的例子

// Namespace for timer
var myPage = {
  timer: null
}

// Blur event for textbox
.blur(function() {
  myPage.timer = setTimeout(function() { 
    // Hide the div
  }, 1000);
});

// Click event for DIV
.click(function() {
  clearTimeout(myPage.timer);
  // Fill in the textbox
  $(this).hide();
});

我会在该字段之后立即添加一个带有制表位的关闭按钮。这将解决不知道秘密的用户（切换）可能没有意识到有一种方法可以在不选择选项的情况下关闭对话框的问题。
使用mousedown事件，该事件在用户单击helper元素但在输入元素上触发blur事件之前触发

$('#input').blur(function () {
  $('#helper').hide();
});

$('#helper').mousedown(function () {
  console.log('This executed before the blur event');
});