Javascript 当操作在div或输入字段中时，是否显示并保持div可见？

当用户单击/聚焦输入字段时，我想在输入字段下显示一个div，当焦点不在或用户在div或输入字段外单击时隐藏该div。 在这个提琴示例中，当我单击input时，将显示一个div，当我在输入字段外单击时，它将被隐藏

但我希望在以下条件下保持div可见：

1. When input is focused/clicked.
2. When click is within the div(.options).

在以下情况下，应隐藏div：

1. Input is unfocused and click in not within div.
2. Click outside div.

您可以按以下方式尝试使用relatedTarget：

$function{ 变量inputField=$'input_field'； var optionsResult=$‘选项’； inputField.focusinfunction e{ e、 防止违约； 选项result.show； }.focusoutfunction e{ 相关目标{ ife.relatedTarget.tagName！=“A” 选项result.hide； } 否则{ 选项result.hide； } }; }; $document.on'click'，function e{ ife.target.tagName==“HTML”{ $‘选项’。隐藏； } }; .选项{ 显示：无； 位置：绝对位置； 浮动：左； 宽度：300px； 高度：200px； 背景：eee； } a{ 显示：块； 浮动：左； 宽度：100%； } 另一个数据集 您可以按以下方式尝试使用relatedTarget：

$function{ 变量inputField=$'input_field'； var optionsResult=$‘选项’； inputField.focusinfunction e{ e、 防止违约； 选项result.show； }.focusoutfunction e{ 相关目标{ ife.relatedTarget.tagName！=“A” 选项result.hide； } 否则{ 选项result.hide； } }; }; $document.on'click'，function e{ ife.target.tagName==“HTML”{ $‘选项’。隐藏； } }; .选项{ 显示：无； 位置：绝对位置； 浮动：左； 宽度：300px； 高度：200px； 背景：eee； } a{ 显示：块； 浮动：左； 宽度：100%； } 另一个数据集

---

确保body标签包含你的应用程序，并且它是窗口的全宽和全高。添加en event listener以查看单击事件是否在options div之外，而不是输入字段之外。如果是这种情况，请隐藏options div

身体{ 高度：100vh； 宽度：100%； }

---

确保body标签包含你的应用程序，并且它是窗口的全宽和全高。添加en event listener以查看单击事件是否在options div之外，而不是输入字段之外。如果是这种情况，请隐藏options div

身体{ 高度：100vh； 宽度：100%； }

---

当您在输入字段内单击，然后直接单击div内的任何链接时，它的工作并不完美。之后，无论您在何处单击div，都将保持可见。除非您再次单击输入字段，然后单击主体。当您单击输入字段内部，然后直接单击div内部的任何链接时，这将无法正常工作。此后，无论您在何处单击div，都将保持可见。除非您再次单击输入字段，然后单击正文。

$(function () {
    var inputField = $('#input_field');
    var optionsResult = $('#options');
    var options = document.querySelector('#options');

    // Listen for click events on body
    document.body.addEventListener('click', function (event) {
      // hide options if click is outside of options div and not the input element
      if (!options.contains(event.target) && event.target.id !== 'input_field') {
        optionsResult.hide();
      }
    });

    inputField.focusin(function (e) {
        e.preventDefault();
        optionsResult.show();
    });
});