2 qq 22599883 qq_22599883 于 2016.03.31 17:00 提问

一个JavaScript问题! 2C
$("#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");
        }
    });
});

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

2个回答

CSDNXIAOD
CSDNXIAOD   2016.03.31 17:13

一个javascript语法问题
求救 一个关于JavaScript的问题
挂起一个问题(javascript)
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

showbo
showbo   Ds   Rxr 2016.04.01 11:05

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!