这是我的代码：

// Listen to every click
$('html').click(function(event) {
    if ( $('#mypopupmenu').is(':visible') ) {
        if (event.target.id != 'click_this_to_show_mypopupmenu') {
            $('#mypopupmenu').hide();
        }
    }
});

// Listen to selector's clicks
$('#click_this_to_show_mypopupmenu').click(function() {

  // If the menu is visible, and you clicked the selector again we need to hide
  if ( $('#mypopupmenu').is(':visible') {
      $('#mypopupmenu').hide();
      return true;
  }

  // Else we need to show the popup menu
  $('#mypopupmenu').show();
});

简单插件：

$.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');
});

假设您想要检测用户在外部或内部单击的div是否具有id，例如：“我的特殊小部件”。

收听身体点击事件：

document.body.addEventListener('click', (e) => {
    if (isInsideMySpecialWidget(e.target, "my-special-widget")) {
        console.log("user clicked INSIDE the widget");
    }
    console.log("user clicked OUTSIDE the widget");
});

function isInsideMySpecialWidget(elem, mySpecialWidgetId){
    while (elem.parentElement) {
        if (elem.id === mySpecialWidgetId) {
            return true;
        }
        elem = elem.parentElement;
    }
    return false;
}

在这种情况下，您不会破坏页面中某些元素的正常点击流，因为您没有使用“stopPropagation”方法。

使用本机JS API最接近方法的2020解决方案。

document.addEventListener（'click'，（｛target｝）=>{if（！target.lestest（'#menupop'））{document.querySelector（'#menupop'）.style.display=“无”}})#菜单弹出窗口{宽度：300px；高度：300px；背景色：红色；}<div id=“menupop”>单击外部将关闭此</div>

所有这些答案都解决了这个问题，但我想提供一个完全符合需要的moders es6解决方案。我只是希望让大家对这个可运行的演示感到满意。

window.clickOutSide=（元素，单击外部，单击内部）=>{document.addEventListener（'click'，（event）=>{if（！element.contains（event.target））{if（单击类型内部==“函数”）{单击外侧（）；}}其他{if（单击类型内部==“函数”）{单击内侧（）；}}});};window.clickOutSide（document.querySelector（'.block'），（）=>警报（'clicked outside'）；.块{宽度：400px；高度：400px；背景色：红色；}<div class=“block”></div>

$(document).on("click",function (event)   
 {   
     console.log(event);
   if ($(event.target).closest('.element').length == 0)
     {
    //your code here
      if ($(".element").hasClass("active"))
      {
        $(".element").removeClass("active");
      }
     }
 });

尝试此编码以获得解决方案。