Display:none 阻止 jQuery 中的点击事件答案

【问题标题】：Display:none is preventing click event in jQueryDisplay:none 阻止 jQuery 中的点击事件
【发布时间】：2017-01-17 16:12:07
【问题描述】：

我有一个带有搜索建议的搜索框：

<input id="searchBar" />
<div id="searchSuggestion"></div>

当输入时，div searchSuggestion 会通过 jQuery ajax 自动更新（代码未显示）。要隐藏/显示自动完成建议（显示在搜索文本框下方），我使用：

$searchBar.blur(function () {
    $searchSuggestion.css("display", "none");
});
$searchBar.focus(function () {
    $searchSuggestion.css("display", "");
});

到目前为止一切顺利。

现在，我想在用户点击搜索建议项时自动填充文本框：

$searchSuggestion.on("click", ".item", function () {
    alert("clicked");
});

问题是，点击搜索建议项会导致文本框失去焦点，因此在搜索建议项上设置了display:none，导致click 事件无法触发！

如果我删除 display:none 代码，一切正常。

我该如何解决这个冲突？

【问题讨论】：

您已经大致列出了您需要的逻辑。当您点击除搜索建议之外的任何内容时，隐藏搜索建议。
委托点击。如果 event.target 不是建议或搜索栏，则隐藏
@KevinB 究竟该怎么做？捕获全局鼠标点击事件？
...我不明白反对票。一点也不。
@kevin 这是一种方式，是的。

标签： javascript jquery html

【解决方案1】：

以this 解决方案结束，它可以防止 mousedown 事件传播并导致元素在单击（这需要 mouseup）被触发之前失去焦点：

$searchSuggestion.on("mousedown", function (e) {
    e.preventDefault();
}).on("click", ".item", function () {
    alert("clicked");
});

【讨论】：

【解决方案2】：

您可以通过在 blur 处理程序中添加一个小的 timeout 来解决此问题，例如：

$searchBar.blur(function () {
    setTimeout(function() {
        $searchSuggestion.css("display", "none");
    }, 150);
});

【讨论】：

这不是漏掉了整个...。单击建议项部分时清除超时？
是否可以在不超时的情况下执行此操作？理想情况下，用户点击建议的那一刻，焦点是已知的。我只需要在 blur() 事件之前触发 click() 事件。
@KevinB 不需要清除timeouts，因为它只创建一个实例，另一方面需要清除间隔
@Tha'erAl-Ajlouni 是的，但是...如果您不清除它，那么它会在单击建议项目后不久隐藏...我想如果它是你的话想要
@kevin blur 处理程序不知道click 事件，并且无法知道单击了哪个项目！