1

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

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

*这根本不起作用

4

6 回答 6

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()函数。

于 2013-02-22T21:28:47.193 回答
1

只需过滤掉.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
        }
    });
});
于 2013-02-22T21:29:00.983 回答
1

如果要检查 .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');
});

小提琴

这是另一个解决方案

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

小提琴

于 2013-02-22T21:53:01.007 回答
0

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

$(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
});
于 2013-02-22T21:30:28.190 回答
0

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

$('html').on('click', function () {
    alert("Clicked!");
});

$('.containers').on('click', function (event) {
    return false;
});

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

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

于 2013-02-22T22:21:28.860 回答
-1

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

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

$(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”中多余撇号的转义：don\'t。

文档和相关阅读

于 2013-02-22T21:30:36.827 回答