一个JavaScript问题！

Question

$("#searchImg_3").click(function () {
    $("#chooseRole").slideToggle("fast");
});

这段代码是为了写一个只读的input输入框和一个下拉框，实现点击输入框就会弹出下拉框，但我发现只能通过点击输入框来实现下拉框的下滑与收回，于是我又加了一段：

    $(document).click(function (e) {  //每次点击鼠标判定该点击的元素是否是searchImg_3或chooseRole元素
        console.log($(e.target).closest("#chooseRole").length);
        if ($(e.target).closest("#searchImg_3").length == 0 && $(e.target).closest("#chooseRole").length == 0) {
            $("#chooseRole").slideUp("fast");
            $(document).unbind("click");
        }
    });

点击文档内任何都判断我点击的元素是否是输入框或下拉框，不是则收回下拉框以达到点击除了这两个元素之外的任何地方能够收回下拉框。其中：

console.log($(e.target).closest("#chooseRole").length);

这段代码起初是为了查看closest()返回的是否是一个数组对象，确实也发现当点击的非判断元素时length返回的是0，点击的是我需要判断的元素时返回的是1。

这时候我突然想到不能让每一次无意中的点击都去触发判断，而应该给它添加一个触发条件，于是我让它只有在点击输入框之后才进行判断：

$("#searchImg_3").click(function () {
    $("#chooseRole").slideToggle("fast");
    $(document).click(function (e) {  //每次点击鼠标判定该点击的元素是否是searchImg_3或chooseRole元素
        console.log($(e.target).closest("#chooseRole").length);
        if ($(e.target).closest("#searchImg_3").length == 0 && $(e.target).closest("#chooseRole").length == 0) {
            $("#chooseRole").slideUp("fast");
        }
    });
});

但是只要点击输入框之后每一次点击鼠标都会在控制台产生n+1个输出，点击任何元素都是这样，我想这样的话如果要长时间在这个网页上操作是不是久而久之导致浏览器变卡，但不知道这样产生的原因，希望大家帮我解决一下这个困惑。

最后附上我想到的解决方案：

$("#searchImg_3").click(function () {
    $("#chooseRole").slideToggle("fast");
    $(document).click(function (e) {  //每次点击鼠标判定该点击的元素是否是searchImg_3或chooseRole元素（应设置触发条件）
        console.log($(e.target).closest("#chooseRole").length);
        if ($(e.target).closest("#searchImg_3").length == 0 && $(e.target).closest("#chooseRole").length == 0) {
            $("#chooseRole").slideUp("fast");
            $(document).unbind("click");
        }
    });
});

这样在点击下拉框以外的地方后只会进行一次判断，之后控制台不会再有输出。

Answer 1

给document添加click，判断当前点击对象是哪个，是否弹层中对象就行了，干嘛想得那么复杂