jquery 点击每个元素，但

Posted 2023-05-09

【中文标题】jquery 点击每个元素，但

【英文标题】：jquery on click every element but

【发布时间】：2013-02-07 12:19:37

【问题描述】：

当点击页面上除元素及其子元素之外的任何内容时，我试图从点击的元素中删除 active 类。

我知道我没有正确使用not() 选择器，但这是我最好的猜测。我也不知道如何添加关于孩子的部分（？）

$(document).ready(function () 
    $('#content_container').on('click', '.wrapper-dropdown-1', function () 
        //close all open dropdowns
        $('.wrapper-dropdown-1').not(this).removeClass('active');


        //close dropdown if anywhere on the body is clicked
        $('body').on('click', ('#content_container').not(this), function () 
            $(this).removeClass('active');
        ); 
        //Uncaught TypeError: Object #content_container has no method 'not'


        var dropdown = $(this);
        dropdown.toggleClass('active');
    );
);

//Uncaught TypeError: Object #content_container has no method 'not' 

我无法理解这与第四行中的成功实现之间的区别。

$('.wrapper-dropdown-1').not(this).removeClass('active');

【问题讨论】：

托马斯，再多 1 个代表点！

@75inchpianist 不再是 ;) 我不得不把这一切都搞砸了

在选择器之前不需要 $ 来告诉它的 jquery

@75inchpianist 哈哈，是的！

@75inchpianist 我对$ 的确切位置和位置有点困惑.. :/

【参考方案1】：

var dropdown;

$('body').on('click', function () 
    if ($(e.target).closest(dropdown).length) return;
    $('.wrapper-dropdown-1').removeClass('active');
); 

$('#content_container').on('click', '.wrapper-dropdown-1', function () 
    $('.wrapper-dropdown-1').not(this).removeClass('active');
    dropdown = $(this).toggleClass('active');
);

注意使用$(e.target)（原始事件元素）而不是$(this)（始终为body）。

必须采用这种方式的原因是，如果您尝试在 on 事件过滤器中使用 :not 样式选择器，则会阻止该事件在该区域内的元素上触发，但不会在该区域的父元素上触发.带有not 的事件处理程序不会停止事件的传播，只会包含在选择中。 （在捕获的区域内停止事件传播是另一种解决方法，但是随着您的应用变得越来越复杂，维护起来会变得很困难，所以我不推荐它。）

您还在另一个事件处理程序中声明一个事件处理程序。这还有其他问题，例如每次点击该区域时，您都会在body 上获得多个处理程序。您可以想象为事件处理程序命名并自己手动绑定和解除绑定，但让这个处理程序一直运行可能更容易。当您在您的 UI 中提出其他“单击其他任何地方以取消”类型区域时，您可能会想要添加它。

【参考方案2】：

jsBin

$('#content_container').on('click', '.wrapper-dropdown-1', function(evt)
  $(this).toggleClass('active');
);

$('body').click(function(evt)
  var el = $(evt.target).is('.wrapper-dropdown-1') ? evt.target : null;
  $('#content_container .wrapper-dropdown-1').not(el).removeClass('active');
);