Question

如果我有一组jquery元素var elements = $('.containers');如何选择正文中的所有内容但是该元素集并附加一个click事件？我尝试了类似的东西，

var filtered = $('*').filter(function(index){
    return elements;
});

$(document).ready(function(){
    $('body').on('click', filtered, function(){
         alert('something on body was clicked that wasn't "element"');
     });
});

*这根本不起作用

Answer 1

使用.not()选择器。

$('body').find('*').not('.containers').on('click',function(){
    // do something
});

您最好将点击事件附加到比$('body').find('*')更具体的内容（这是身体的所有子元素），但是要使用您给我的内容。或者你可以采取不同的方式：

$('body').find('*').on('click',function(){
    // do something
});

$('.containers').off('click');

这会为所有内容设置它，然后仅为.containers项删除它。有点冗长，但更明确，如果你改变主意，你只需要删除/修改.off()功能。

Answer 2

在附加事件处理程序之前，最好过滤掉.containers元素：

$(document).ready(function(){
    $('*').filter(function() {
         return ! $(this).is('.containers');
    }).on('click', function(){
         alert('something on body was clicked that wasnt "element"');
    });
});

修改

如果您试图通过点击外部来关闭下拉列表，模态或类似内容，如评论所示，那么这样做的方法是：

$(function() { $(document).on('click', function(e) { if ( !$(e.target).closest('.containers').length ) { // you clicked outside } }); });

Answer 3

如果要检查.container和容器的后代，可以使用.filter()。然后使用.closest()

检查当前元素是否 - 或者祖先元素是否具有class = container

$('body *').filter(function(){
    return $(this).closest('.containers').length === 0; 
}).on('click', function(){
     alert('something on body was clicked that wasn\'t "element" or inside element');
});

FIDDLE

这是另一种解决方案

$('body').on('click','*:not(.containers,.containers *)', function(){
     alert('something on body was clicked that wasn\'t "element" or inside element');
});

FIDDLE

Answer 4

更好的方法是在文档上只有一个处理程序，并检查在事件冒泡到文档时单击的元素。

$(document).on('click', function (event) {
    var $target = $(event.target);
    if ($target.hasClass('containers') || $target.closest('.containers').length > 0) {
        alert('something on body was clicked that wasn't "element"');
        return;    
    }

    // Rest of logic
});

Answer 5

另一种选择是简单地向$('html')添加一个处理程序，然后确保容器处理程序调用{{1}}，或者返回false，它在jQuery中自动处理传播停止：

event.stopPropagation()

示例：http://jsfiddle.net/7hGL7/

对于你正在做的事情，即关闭菜单，这是一个简单而直接的解决方案。

Answer 6

示例代码中的一个问题是警报中未转义的单引号。

至于排除某些元素，我建议使用您设置的路径（将事件附加到正文），然后检查事件目标是否具有给定的类。像这样：

$(document).ready(function(){
    $('body').on('click', function(e){
        if ($(e.target).hasClass('containers') || $(e.target).closest('.containers').length > 0)
            return; // do nothing with elements that have the container class
        alert('something on body was clicked that wasn\'t "element"');
     });
});

请注意“不要”一词中的额外撇号的转义：don\'t。

文档及相关阅读

jQuery.hasClass - http://api.jquery.com/hasClass/
jQuery.closest - http://api.jquery.com/closest/
“值，变量和文字” - https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals

使用jquery过滤来自body中所有元素的元素

6 个答案: