js关于点击目标窗口外则隐藏

Question

有个拉下菜单，需要点击任意地方出了本身的地方就隐藏，具体使用原生js要怎么样实现？

Answer 1

一般是在menu中阻止事件冒泡，docment中关闭菜单。

menu.addEventListener('click', function(e) {
    menu.style.display = 'block';
     stop(e);
})  
document.addEventListener('click', function() {
    menu.style.display = 'none';
})  

function stop(e){
     e = e || win.event;
     e.stopPropagation ? e.stopPropagation() 
     : e.cancelBubble = true;
}

还可以在document.click中通过判断e.target执行相应的代码

Answer 2

绑定document点击事件让下拉菜单隐藏 给下拉菜单的点击事件阻止冒泡

Answer 3

在document添加一个click事件，如果点击了document就把 下拉菜单 隐藏

document.addEventListener('click', function() {
    menu.style.display = 'none';
})

Answer 4

$(document).click(function(){

$("select").hide();

})

Answer 5

页面绑定click事件，获取menu元素设置display为none

Answer 6

借着这个契机，去吃透浏览器的事件流吧，有点意思