Question

我有一个菜单可以切换打开按钮。每当你点击打开菜单外面时，我也会被要求关闭它。

这实际上与“点击模式以外的关闭”行为相同，但应用于固定的菜单标题。

我想到了这样的事情：

$('*').not('.header').on('click', function(){
        //close menu function
    console.log("close the menu")
});

但它在很多方面都不起作用：

1）无论我在哪里点击，都会触发console.log 2）每次点击，我得到3个console.log。

这是一个小提琴：https://jsfiddle.net/Ln1wabqq/1/

我尝试将$('*')更改为

$('*:not(".header")')
$('*').not('.header, .header *')
$('').not('.header')

但我得到了相同的输出。我在这里走错了路吗？

非常感谢你的帮助

Answer 1

您可以检测到这样的外部点击：

$(document).click(function(event) { 
    if(!$(event.target).closest('.header').length){
        // click outside .header
    }
});

Answer 2

点击冒泡，因此通过在文档中的每个元素上挂钩click，您可以在元素及其后代/祖先上挂钩。当点击气泡时，你的处理程序会在每个级别触发。

如果你想通过挂钩每个元素来处理它，你可以使用一个忽略对.header后代元素的点击的处理程序：

$("*").on("click.closemenu", function() {
    if ($(this).closest(".header").length) {
        // This is .header or a descendant, ignore
    } else {
        // Close menu

        // Remove this handler (if desired)
        $("*").off("click.closemenu");
    }
    return false; // Either way, prevent further bubbling and any default action
});

Answer 3

你可以试试这个：

       $("body :not(".header")").clicked(your function)

Answer 4

假设 .header 是 body 直接子项，请尝试使用：

$('body>*').not('.header').on('click', function(){
    //close menu function
    console.log("close the menu")
});

请参阅 Fiddle

Answer 5

这里有一种方法可以做你需要的，过滤只有“头”作为父类的元素。

$(document).on('click', 'div', function(e){
    if ($(this).parent('.header').length > 0) {
        //close menu function
        console.log("close the menu");
    }
});

关闭菜单（或模态）的jquery .not（）无效

5 个答案: