jquery-selectors - jquery .not() 在单击所有元素但不是某些元素时执行方法

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');
    })