Javascript 侧面板关闭时，我关闭它以外的任何地方

我有一个左面板，当我按下菜单按钮时，它会滑入（这是一个移动版本）。当左面板滑入时，我希望在单击除左面板本身以外的任何其他位置时关闭它。我提出的jquery是：

$(document).ready(function(){
        $('.menu').click( function() {

    if ($('.sidemenuu').hasClass('hidden')) {
       $('.sidemenuu').animate({left:"0%"},255);
    $('.sidemenuu').removeClass('hidden');
    return true;
    }
    else {
    if($('.sidemenuu').css("left","0")){
                alert('jkk');
                $('html').click(function() {
        $('.sidemenuu').animate({left:"-80%"},255);
    });
        }

        $('.sidemenuu').addClass('hidden');
        $('.sidemenuu').animate({left:"-80%"},255);

    }
});

$('.close').click(function(){

        $('.sidemenuu').animate({left:"-80%"},255).addClass('hidden');
        //$('.sidemenuu').addClass('hidden');
            });

            $('.sidemenuu').click(function(e){


            });

        });

html:

fiddle在这里：

为什么不使用事件处理程序呢

当某个元素或其中的任何元素失去焦点时，focusout事件被发送到该元素。这与模糊事件不同，因为它支持检测子元素上的焦点丢失（换句话说，它支持事件冒泡）

示例：

$('.close').click(function () {

    $('.sidemenuu').animate({
        left: "-80%"
    }, 255).addClass('hidden');
    //$('.sidemenuu').addClass('hidden');
});


$('.sidemenuu').focusout()(function () {

    $('.sidemenuu').animate({
        left: "-80%"
    }, 255).addClass('hidden');
    //$('.sidemenuu').addClass('hidden');
});

$('.close').on( "click", closeSidemenu )
$('.sidemenuu').on( "focusout", closeSidemenu )

function closeSidemenu() {

        $('.sidemenuu').animate({
            left: "-80%"
        }, 255).addClass('hidden');
        //$('.sidemenuu').addClass('hidden');

}

您还可以为两者使用单独的函数，因为它们执行相同的操作

示例：

$('.close').click(function () {

    $('.sidemenuu').animate({
        left: "-80%"
    }, 255).addClass('hidden');
    //$('.sidemenuu').addClass('hidden');
});


$('.sidemenuu').focusout()(function () {

    $('.sidemenuu').animate({
        left: "-80%"
    }, 255).addClass('hidden');
    //$('.sidemenuu').addClass('hidden');
});

$('.close').on( "click", closeSidemenu )
$('.sidemenuu').on( "focusout", closeSidemenu )

function closeSidemenu() {

        $('.sidemenuu').animate({
            left: "-80%"
        }, 255).addClass('hidden');
        //$('.sidemenuu').addClass('hidden');

}

---

任何一种方法都是有效的，但第二种方法更易于维护，需要的代码更少，并且更容易进行故障排除。

这是一个相当常见且可能棘手的问题。您希望绑定到元素“外部”的任何单击，但DOM事件不能以这种方式工作。每一次点击都在某个东西的内部，这就是将接收事件并将其冒泡到DOM中的内容

因此，解决这个问题的方法是倾听

文档

本身上的点击，并检查这些点击是否在要检测其外部点击的元素（侧边栏）内。如果单击一直到达文档而没有通过元素，则它们位于外部。最简单的检查函数如下所示：

var openSidebar = function(){
    $('.sidemenuu').removeClass('hidden').animate({left:"0%"},255);
}
var closeSidebar = function(){
    $('.sidemenuu').addClass('hidden').animate({left:"-80%"},255);
}

$('.menu').click( function(event) {
    event.stopPropagation();
    openSidebar();
});
$(document).click( function(event){
    if ( !$(event.target).closest('.sidemenu').length ) {
        closeSidebar();   
    }
});

请参见此处更新的fiddle：

注意一件非常重要的事情：在

菜单中单击

函数，第一行是调用

事件.stopPropagation（）

。此调用阻止事件继续冒泡到文档的根

回想一下，文档上的点击绑定将捕获所有点击，任何不是在侧菜单元素内部产生的点击都将调用函数来关闭它。因此，如果您有一个位于外部的元素，并且您不希望该元素触发侧菜单关闭，那么您需要停止该元素上的点击传播。在这种情况下，这就是我对你小提琴上的菜单按钮所做的

---

希望这有帮助

“我希望在单击除左面板之外的任何其他位置时关闭它。”focusout事件仅在元素失去焦点时发生，在这种情况下，他的侧菜单是一个div，并且不会因为用户正在查看它而处于焦点。请参阅：。要使它成为焦点，我认为您至少需要向div添加一个tabindex，用户需要在其中添加选项卡或单击。你不能失去焦点（因此触发focusout），除非你有焦点。因此，您提出的解决方案没有按书面形式工作，很难使其可行。