这里的其他解决方案不适合我，所以我不得不使用：

if(!$(event.target).is('#foo'))
{
    // hide menu
}

编辑：普通Javascript变体（2021-03-31）

我使用这个方法来处理在单击下拉菜单外部时关闭下拉菜单的问题。

首先，我为组件的所有元素创建了一个自定义类名。这个类名将被添加到组成菜单小部件的所有元素中。

const className = `dropdown-${Date.now()}-${Math.random() * 100}`;

我创建了一个函数来检查单击和单击元素的类名。如果clicked元素不包含我上面生成的自定义类名，它应该将show标志设置为false，菜单将关闭。

const onClickOutside = (e) => {
  if (!e.target.className.includes(className)) {
    show = false;
  }
};

然后，我将单击处理程序附加到窗口对象。

// add when widget loads
window.addEventListener("click", onClickOutside);

……最后还有一些家政服务

// remove listener when destroying the widget
window.removeEventListener("click", onClickOutside);

对于某些人来说，这可能是一个更好的解决方案。

$(".menu_link").click(function(){
    // show menu code
});

$(".menu_link").mouseleave(function(){
    //hide menu code, you may add a timer for 3 seconds before code to be run
});

我知道mouseleave不仅意味着在外面单击，还意味着离开该元素的区域。

一旦菜单本身位于menu_link元素内，那么单击或移动菜单本身应该不会有问题。

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>

这种情况的简单解决方案是：

$(document).mouseup(function (e)
{
    var container = $("YOUR SELECTOR"); // Give you class or ID
    
    if (!container.is(e.target) &&            // If the target of the click is not the desired div or section
        container.has(e.target).length === 0) // ... nor a descendant-child of the container
    {
        container.hide();
    }
});

如果在div单击事件之外触发，上述脚本将隐藏div。

这是我解决问题的方法。

$(window).click(function (event) {
    //To improve performance add a checklike 
    //if(myElement.isClosed) return;
    var isClickedElementChildOfMyBox = isChildOfElement(event,'#id-of-my-element');

    if (isClickedElementChildOfMyBox)
        return;

    //your code to hide the element 
});

var isChildOfElement = function (event, selector) {
    if (event.originalEvent.path) {
        return event.originalEvent.path[0].closest(selector) !== null;
    }

    return event.originalEvent.originalTarget.closest(selector) !== null;
}

$('#propertyType').on("click",function(e){
          self.propertyTypeDialog = !self.propertyTypeDialog;
          b = true;
          e.stopPropagation();
          console.log("input clicked");
      });

      $(document).on('click','body:not(#propertyType)',function (e) {
          e.stopPropagation();
          if(b == true)  {
              if ($(e.target).closest("#configuration").length == 0) {
                  b = false;
                  self.propertyTypeDialog = false;
                  console.log("outside clicked");
              }
          }
        // console.log($(e.target).closest("#configuration").length);
      });