web页面常用的一个需求，写下拉菜单是我们往往不是用select_option，而是自定义一个元素列出选项来满足需求，当我们点击按钮出现菜单，点击按钮或菜单以外页面空白地方隐藏该菜单，这里提供一种简单有效的方法仅供参考。

代码如下：

<script>
function getEl(obj){
    return document.getElementById(obj)
}

getEl('dom').onclick=function(event){ //点击Id为dom的元素，让Id为con的元素显示
    getEl('con').style.display='block';
    stopBubble(event); 
    document.onclick=function(){//点击其他地方，Id为con的元素隐藏
      getEl('con').style.display='none';
　　　document.onclick=null;　
    }
}
   
getEl('con').onclick=function(event){
    //只阻止了向上冒泡，而没有阻止向下捕获，所以点击con的内部对象时，仍然可以执行这个函数
    stopBubble(event); 
}

//阻止冒泡函数
function stopBubble(e){  
    if(e && e.stopPropagation){
      e.stopPropagation();  //w3c
    }else{
      window.event.cancelBubble=true; //IE
    }
}
</script>

实现也很简单，在点击显示的事件中，需要做阻止事件冒泡的处理，否则就触发页面的点击事件了。  

链接: https://www.fly63.com/article/detial/9691