Javascript 单击外部而不仅仅是“关闭”按钮时关闭导航栏

我从屏幕右侧打开了这个导航的工作版本。当我点击关闭按钮时，它关闭

我想它关闭时，我点击导航栏外的太多，只是限制它关闭按钮X。我应该如何继续

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； }

.sidenav{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
右：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.sidenav a:悬停，.offcanvas a:聚焦{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

动画侧导航示例
单击下面的元素打开侧面导航菜单

☰ 打开

您可以在窗口中添加一个单击事件侦听器，这样，如果用户单击菜单关闭的任何位置，该菜单都会关闭。如果您不希望在用户单击菜单中的某个项目时将其关闭，请使用

event.stopPropagation()

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";

    window.addEventListener(
        "click",
        closeNav
    );
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    window.removeEventListener("click", closeNav);
}

试试这个

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； } $（'body'）。在（'click'，function（）上{ if（parseInt（$（'#mySidenav'）.css（'width'））>0）{ closeNav（）； } });

.sidenav{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
右：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.sidenav a:悬停，.offcanvas a:聚焦{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

动画侧导航示例
单击下面的元素打开侧面导航菜单

☰ 打开

我该怎么做？你能帮助整合当前的代码吗？我会考虑寻找替代方法。虽然它可能“起作用”，但肯定有一些复杂的因素需要考虑。请参阅以下内容了解更多详细信息：它不工作。我有两个错误。当我加载页面

Uncaught TypeError:无法读取a11.html:64处未定义的属性'stopPropagation'，当我单击该页面
Uncaught TypeError:未能对'EventTarget'执行'removeEventListener'：需要2个参数，但仅存在1个参数。在closeNav（a11.html:77）
上，我特意发布了没有
event.stopPropagation的版本，看看Chris Cruz是怎么说的。如果您想使用它，请将
函数closeNav（）
重新定义为
函数closeNav（event）
，然后您可以在所述函数中使用
event.stopPropagation（）
。很抱歉，它应该是
窗口。我相信，移除ventListener（“单击”，closeNav）
。你是否有可能反对使用jQuery？你知道如何在移动触摸屏上实现这一点吗？