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

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")

它将倾听所有发生的事件，并一直冒泡到身体，无论它们的起源如何。

---

我认为您想要的是一个委托的处理程序来侦听冒泡到body的事件，但只有在它们与提供的选择器匹配时才继续，或者您可以像这样检查处理程序中的值：

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

我不太确定您要查找的内容，但是这里有一个堆栈片段，当您在dropdowsearch区域之外单击时，它将隐藏下拉列表

堆栈代码段中的演示

$("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" />