如果您只想在单击按钮时显示一个窗口，而在单击外部时取消显示该窗口。（或再次按下按钮）此波纹管工作良好

document.body.onclick = function() { undisp_menu(); };
var menu_on = 0;

function menu_trigger(event){

    if (menu_on == 0)
    {
        // otherwise u will call the undisp on body when 
        // click on the button
        event.stopPropagation(); 

        disp_menu();
    }

    else{
        undisp_menu();
    }

}


function disp_menu(){

    menu_on = 1;
    var e = document.getElementsByClassName("menu")[0];
    e.className = "menu on";

}

function undisp_menu(){

    menu_on = 0;
    var e = document.getElementsByClassName("menu")[0];
    e.className = "menu";

}

别忘了这个按钮

<div class="button" onclick="menu_trigger(event)">

<div class="menu">

以及css：

.menu{
    display: none;
}

.on {
    display: inline-block;
}

使用流中断、模糊/聚焦事件或任何其他棘手的技术，只需将事件流与元素的亲属关系匹配即可：

$(document).on("click.menu-outside", function(event){
    // Test if target and it's parent aren't #menuscontainer
    // That means the click event occur on other branch of document tree
    if(!$(event.target).parents().andSelf().is("#menuscontainer")){
        // Click outisde #menuscontainer
        // Hide the menus (but test if menus aren't already hidden)
    }
});

要删除事件侦听器外部的单击，只需执行以下操作：

$(document).off("click.menu-outside");

还在寻找检测外部点击的完美解决方案？别再看了！介绍Clickout Event，这是一个为Clickout和其他类似事件提供通用支持的包，它适用于所有场景：普通HTML onclickout属性、普通JavaScript的.addEventListener（'clickkout'）、jQuery的.on（'click kout'”）、Vue.js的v-on:cclickout指令。只要前端框架内部使用addEventListener来处理事件，Clickout Event适用于它。只需在页面中的任何位置添加脚本标记，它就会像魔术一样发挥作用。

HTML属性

<div onclickout="console.log('clickout detected')">...</div>

香草JavaScript

document.getElementById('myId').addEventListener('clickout', myListener);

jQuery

$('#myId').on('clickout', myListener);

Vue.js

<div v-on:clickout="open=false">...</div>

有棱角的

<div (clickout)="close()">...</div>

我不认为你真正需要的是当用户在外面点击时关闭菜单；您需要的是当用户单击页面上的任何位置时关闭菜单。如果你点击菜单，或者离开菜单，它应该会关闭吗？

发现上面没有令人满意的答案，促使我前几天写了这篇博文。对于更迂腐的人，有很多陷阱需要注意：

如果在单击时将单击事件处理程序附加到body元素，请确保在关闭菜单并解除事件绑定之前等待第二次单击。否则，打开菜单的单击事件将弹出到必须关闭菜单的侦听器。若在单击事件上使用event.stopProposition（），则页面中的其他元素都不能在任何位置单击以关闭功能。无限期地将click事件处理程序附加到body元素不是一个高性能的解决方案将事件的目标及其父级与处理程序的创建者进行比较时，假设您想要的是在单击关闭菜单时关闭菜单，而真正想要的是当您单击页面上的任何位置时关闭菜单。监听body元素上的事件会使代码更加脆弱。像这样无辜的风格会破坏它：body｛margin-left:auto；margin-right:auto；width:960px；｝

解决方案1

不要使用event.stopPropagation（），因为它会产生一些副作用，只需定义一个简单的标志变量并添加一个if条件。我对此进行了测试，工作正常，没有任何stopPropagation的副作用：

var flag = "1";
$('#menucontainer').click(function(event){
    flag = "0"; // flag 0 means click happened in the area where we should not do any action
});

$('html').click(function() {
    if(flag != "0"){
        // Hide the menus if visible
    }
    else {
        flag = "1";
    }
});

解决方案2

只有一个简单的if条件：

$(document).on('click', function(event){
    var container = $("#menucontainer");
    if (!container.is(event.target) &&            // If the target of the click isn't the container...
        container.has(event.target).length === 0) // ... nor a descendant of the container
    {
        // Do whatever you want to do when click is outside the element
    }
});

只是一个警告，使用这个：

$('html').click(function() {
  // Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

它阻止RubyonRails UJS驱动程序正常工作。例如，link_to“click”、“/url”、：method=>：delete将不起作用。

这可能是一种变通方法：

$('html').click(function() {
  // Hide the menus if visible
});

$('#menucontainer').click(function(event){
  if (!$(event.target).data('method')) {
    event.stopPropagation();
  }
});