如何在多个元素上设置 focusout 但在它们之间转移焦点时防止？

Question

我想做一个可搜索的输入，当它得到 focusin 时显示一个 dropdown，其中包含使用服务器端语言填充的可能值列表。我尝试在任何不是使用以下代码涉及的元素之一的元素上使用 focusin：

$("body").not($(".dropdownSearch").find("input")).not($(".dropdownSearch").find("a")).on("click focusin", function () {
    $(".dropdown-menu").hide();
});

但是当我运行代码并单击输入时，它实际上在输入时得到 focusin，但之后在主体上得到 focusin，在输入时出现 focusout。

这是 html 个元素：

<div class="dropdownSearch dropdown">

    <span><input type="text" id="input1" name="input1" class="dropdown-toggle" /></span>
    <span><input type="text" id="input2" name="input2" class="dropdown-toggle" /></span>
    <span><input type="text" id="input3" name="input3" class="dropdown-toggle" /></span>

    <div class="dropdown-menu">
        <a class="dropdown-item">name</a>
        <a class="dropdown-item">name</a>
        <a class="dropdown-item">name</a>
    </div>

</div>

在此代码中，多个输入可以打开相同的下拉列表，但使用 js 从 JSON 个文件中读取数据来更改值。

有没有更好的方法？感谢您的帮助。

Answer 1

所以让我们稍微解压一下您的选择器，因为我不确定它是否按照您的预期进行

你可以简化这个 $(".dropdownSearch").find("input") 来寻找任何 input 元素作为 .dropdownSearch 的后代到单个 CSS 后代选择器，像这样 $(".dropdownSearch input") .

所以您的选择器与此相同：

$("body").not(".dropdownSearch input").not(".dropdownSearch a")

它正在寻找的是任何 body 元素，但如果它是 input 或 a，则排除该匹配项，这有效地解析为仅选择正文：

$("body")

它将监听所有发生的事件和 bubble 一直到 body，无论它们的来源如何。

我想你想要的是 delegated handler 来监听冒泡到 body 的事件，但只有当它们与提供的选择器匹配时才继续，或者你可以检查处理程序中的值像这样：

$("body").on("click focus", function (e) {
  var notDropdownEl = $(e.target).is(":not(.dropdownSearch input):not(.dropdownSearch a)")

  if (notDropdownEl) {
    $(".dropdown-menu").hide();
  }
});

我不太确定你在寻找什么，但这里有一个堆栈片段，当你在下拉搜索区域外单击时，它会隐藏下拉菜单

$("body").on("click focus", function (e) {
  if ($(e.target).is(":not(.dropdownSearch input):not(.dropdownSearch a)")) {
    $(".dropdown-menu").hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="dropdownSearch dropdown">
    Will Not Hide if Clicked here
    <span><input type="text" id="input1" name="input1" class="dropdown-toggle" /></span>
    <span><input type="text" id="input2" name="input2" class="dropdown-toggle" /></span>
    <span><input type="text" id="input3" name="input3" class="dropdown-toggle" /></span>

    <div class="dropdown-menu">
        <a class="dropdown-item">name</a>
        <a class="dropdown-item">name</a>
        <a class="dropdown-item">name</a>
    </div>

</div>

<p>Will Hide if Clicked Here</p>
<input type="text" name="outside" />

如何在多个元素上设置 focusout 但在它们之间转移焦点时防止？

How to set focusout on multiple element but prevent when shifting focus between them?

javascript

jquery

bootstrap-5