Question

我想在文档中的任何位置隐藏一个框，但不是在少数区域中隐藏，所以我编写了这段代码：

$(document).not('#color_picker,#selected_color_box,#color_picker_choose,#choose_color_box').click(function(event){
                            event.preventDefault();
                            $('#color_picker').css('visibility','hidden');
                        })

但它现在从未显示该框，似乎无论用户是否点击.not()中的元素，它都会在任何地方执行该功能，而如果用户点击不在的元素，则不应执行此功能

那么我做错了什么或者这样做是错误的？请让我知道你的建议。

感谢

Answer 1

.not()只是将当前选择过滤为与选择器不匹配的元素。 document与选择器不匹配，因此不对集合进行任何更改。

您应该使用带有选择器的事件委托，该选择器匹配所有不是目标元素的元素。

$(document).on('click',':not(#color_picker,#selected_color_box,#color_picker_choose,#choose_color_box)',function(event){
    event.preventDefault();
    $('#color_picker').css('visibility','hidden');
})

或者您可以将event.target.id与您要忽略的ID列表进行比较：

var idArr = ['color_picker','selected_color_box','color_picker_choose','choose_color_box'];
$(document).on('click',function(event) {
    if ( idArr.indexOf(event.target.id) == -1 ) {
        event.preventDefault();
        $('#color_picker').css('visibility','hidden');
    }
});

Answer 2

你有没有尝试过：

$(document).find("*").not('#color_picker,#selected_color_box,#color_picker_choose,#choose_color_box')

Answer 3

尝试选择所有元素，然后过滤

$('*').not('#color_picker,#selected_color_box,#color_picker_choose,#choose_color_box').click(function(event){
         event.preventDefault();
         $('#color_picker').css('visibility','hidden');
    })

jquery .not（）执行单击所有元素但不是某些元素的方法

3 个答案: