Question

我有一个小的自动完成下拉列表，我想在有人点击文本框外面时隐藏它。到目前为止我一直在使用它

$("#input-group_ids").on("blur", function () {
    $(".input-dropdown").hide();
});

但是，如果有超过10个选项，我的自动完成下拉列表会出现溢出和滚动条。使用上面的代码时，单击滚动条会关闭下拉列表。

只有当点击位于文本框和下拉列表本身之外时，才需要关闭下拉列表。我怎么做？

Answer 1

尚未测试希望这会起作用

$("html").click (function () {
    $(".input-dropdown").hide();
});
$("#input-group_ids, .input-dropdown").click (function (e) {
    e.stopPropagation;
}

Answer 2

如果您无法清除blur事件，请尝试将click事件注册到围绕文本框和下拉列表的元素。它甚至可能是body。

然后在点击事件中检查event.target元素。如果它既不是文本框也不是下拉列表，请将其关闭。

我知道这很笨拙，但它是几种工作选择之一。

Answer 3

试试这个：

$("*:not(#input-group_ids)").on("click", function () {
    $(".input-dropdown").hide();
});

未经测试，因为您没有给出任何jsfiddle

Answer 4

您是否尝试了not selector名称解释了所有内容，如果您在下拉列表和文本框中有容器，则可能会有效

Answer 5

有点hackish但可能有用。

$(elementContainingTheDropDownContent).on('mouseleave', function(e){
    $(window).on('click', function(e){
        //close dropdown
    })
}).on('mouseenter', function(){
    $(window).off('click');
})

Answer 6

我找到了另一个答案，这实际上是我认为最好的版本

$(document).click(function(e) {
    if (!$('#input-group_ids').is(e.target) && !$('.input-dropdown').is(e.target))
        $('.input-dropdown').hide();
});

这比本杰明的回答略胜一筹，因为它不会阻止$("#input-group_ids")上任何点击的传播，这可能会产生意想不到的后果。但是，我接受了Ben的答案，因为它起作用并解决了我的问题，他值得赞扬。 =）

编辑：其实我的版本与@ singe31的版本非常相似，所以我也投了那个版本

检测两个元素之外的点击？

6 个答案: