单击元素时，这将切换导航菜单。

$（document）.on（'click'，函数（e）{var elem=$（e.target）.最近（'#menu'），box=$（e.target）.最近（'#nav'）；if（元素长度）{e.预防违约（）；$（'#nav'）.tggle（）；}否则如果（！box.length）{$（'#nav'）.hide（）；}});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><li id=“menu”><a></a></li><ul id=“nav”><!--单击菜单时，导航将切换（在本例中它可以是一个图标）--><li class=“page”><a>第1页</a></li><li class=“page”><a>第2页</a></li><li class=“page”><a>第3页</a></li><li class=“page”><a>第4页</a></li></ul>

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

    $(document).on('click',  function(e){
        // code
    });

这里有一个纯javascript的简单解决方案。它是ES6的最新版本：

var isMenuClick = false;
var menu = document.getElementById('menuscontainer');
document.addEventListener('click',()=>{
    if(!isMenuClick){
       //Hide the menu here
    }
    //Reset isMenuClick 
    isMenuClick = false;
})
menu.addEventListener('click',()=>{
    isMenuClick = true;
})

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

$(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。

对于那些希望将一个简短的解决方案集成到JS代码中的人来说——一个没有JQuery的小型库：

用法：

// demo code
var htmlElem = document.getElementById('my-element')
function doSomething(){ console.log('outside click') }

// use the lib
var removeListener = new elemOutsideClickListener(htmlElem, doSomething);

// deregister on your wished event
$scope.$on('$destroy', removeListener);

下面是库：

function elemOutsideClickListener (element, outsideClickFunc, insideClickFunc) {
   function onClickOutside (e) {
      var targetEl = e.target; // clicked element
      do {
         // click inside
         if (targetEl === element) {
            if (insideClickFunc) insideClickFunc();
            return;

         // Go up the DOM
         } else {
            targetEl = targetEl.parentNode;
         }
      } while (targetEl);

      // click outside
      if (!targetEl && outsideClickFunc) outsideClickFunc();
   }

   window.addEventListener('click', onClickOutside);

   return function () {
      window.removeEventListener('click', onClickOutside);
   };
}

我从这里获取代码并将其放在函数中：https://www.w3docs.com/snippets/javascript/how-to-detect-a-click-outside-an-element.html

投票选出最受欢迎的答案，但添加

&& (e.target != $('html').get(0)) // ignore the scrollbar

因此，单击滚动条不会隐藏目标元素。