Question

尝试让以下内容无效：只有当点击的内容不包含.remove

时，才会淡出所有带有.completed类的元素

$(document).on('click', ':not(.completed)', function(){
    $('.remove').fadeOut('fast');
});

Answer 1

我发现这是一个jQuery问题：

仅使用:not(.class)它无效。 This jsfiddle 说明了它。

如果您的.completed元素具有相同的标记名称，则可以添加tagname:not("completed")哪个有效（为什么？！）。

在我的示例中，它们是按钮，因此选择器变为button:not('.completed')。

$(document).on('click', 'button:not(.completed)', function(e){
    $('.remove').fadeOut('fast');
});

JSFIDDLE

另一种解决方案是验证点击的元素hasClass('completed')。

if ($(e.srcElement).hasClass("completed")) { return; }

JSFIDDLE

如果所有.completed元素都是div个，请将选择器替换为div:not('completed')。

创建问题here也是一件好事。它将被解决。

Answer 2

你需要检查实际的点击目标是否已完成该类，因为事件冒泡而无法使用on()中的元素过滤器来完成

jQuery(function($){
    $(document).click(function(e){
        if(!$(e.target).is('.completed')){
            $('.remove').remove()
        }
    })
})

演示：Fiddle

Answer 3

:not(.completed)匹配<html>，<body>和网页上的其他所有人。

这意味着click()将绑定到没有.completed类（包括<html>和<body>）的每个元素，不仅仅是您想要的button / input / div。

See what I mean in this fiddle (check the console).

由于:not(.completed)绑定<body>和<html>，为了避免它们，您必须：

:not(.completed, body, html)

但如果您的预期button / input / div位于table之下，那么table也将受到约束。你必须避免使用：

:not(.completed, body, html, table)

正如您所看到的，这种情况很快就会增长。简单的方法是积极缩小选择范围：

.clicableDivs:not(.completed) OR input:not(.completed)

什么适合你。 底线：:not(.completed)匹配太多。把它缩小。

Answer 4

~~我觉得你需要做的就是添加ev.stopPropagation()，因为这会继续通过DOM。~~

$(document).on('click', ':not(.completed)', function(ev){ ev.stopPropagation(); $('.remove').fadeOut('fast'); });

<击>

或者可能，首先检查一下目标是否没有.completed父母，如下所示：

$(document).on('click', function(ev){ if ( ! $(ev.target).closest('.completed').length ) { ev.stopPropagation(); $('.remove').fadeOut('fast'); } });

以下是显示此工作的小提琴：http://jsfiddle.net/C5vqw/

除非元素包含特定类，否则在文档上触发事件

4 个答案: