这对我来说很好。我不是专家。

$(document).click(function(event) {
  var $target = $(event.target);
  if(!$target.closest('#hamburger, a').length &&
  $('#hamburger, a').is(":visible")) {
    $('nav').slideToggle();
  }
});

简单插件：

$.fn.clickOff = function(callback, selfDestroy) {
    var clicked = false;
    var parent = this;
    var destroy = selfDestroy || true;

    parent.click(function() {
        clicked = true;
    });

    $(document).click(function(event) {
        if (!clicked && parent.is(':visible')) {
            if(callback) callback.call(parent, event)
        }
        if (destroy) {
            //parent.clickOff = function() {};
            //parent.off("click");
            //$(document).off("click");
            parent.off("clickOff");
        }
        clicked = false;
    });
};

Use:

$("#myDiv").clickOff(function() {
   alert('clickOff');
});

用纯JavaScript编写的方法

let menu = document.getElementById("menu");

document.addEventListener("click", function(){
    // Hide the menus
    menu.style.display = "none";
}, false);

document.getElementById("menuscontainer").addEventListener("click", function(e){
    // Show the menus
    menu.style.display = "block";
    e.stopPropagation();
}, false);

const button=document.querySelector（'button'）const box=document.querySelector（'.box'）；常量切换=事件=>{event.stopPropagation（）；if（！event.target.closest（'.box'））{console.log（'单击外部'）；box.classList.tggle（“活动”）；box.classList.contains（'active'）? document.addEventListener（'click'，切换）：document.removeEventListener（“单击”，切换）；}其他{console.log（'单击内部'）；}}button.addEventListener（'单击'，切换）；.box格式{位置：绝对；显示：无；页边空白：8px；填充：20px；背景：浅灰色；}.box激活{显示：块；}＜button＞切换框</button＞<div class=“box”><form action=“”><input-type=“text”><button type=“button”>搜索</button></form></div>

还在寻找检测外部点击的完美解决方案？别再看了！介绍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>

如果有人好奇这里是javascript解决方案（es6）：

window.addEventListener('mouseup', e => {
        if (e.target != yourDiv && e.target.parentNode != yourDiv) {
            yourDiv.classList.remove('show-menu');
            //or yourDiv.style.display = 'none';
        }
    })

和es5，以防万一：

window.addEventListener('mouseup', function (e) {
if (e.target != yourDiv && e.target.parentNode != yourDiv) {
    yourDiv.classList.remove('show-menu'); 
    //or yourDiv.style.display = 'none';
}

});