怎样点击div外部隐藏菜单

Question

我用div模拟了一个select列表框，

怎样能点击这个div的外部，就隐藏掉这个菜单。就是点击网页任何一个位置，菜单隐藏回去。

Answer 1

添加documen的click事件

document.addEventListener('click', function(){
  // 隐藏
});

Answer 2

document上注册click事件，判断event.target是不是select组件的子孙，是则不作处理，否则隐藏

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

添加documen的click事件

document.addEventListener('click', function(){
  // 隐藏
});

如果点击菜单并不想自动关闭下拉的话需要在你的菜单div上阻止click事件冒泡。这样可以避免event.target的判断。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 4

常规做法就是在documen上绑定click事件，但是如果有阻止冒泡的事件，会有问题，按照逻辑其实监听上面输入框的focus blur事件更好，在blur的时候隐藏下拉框，但是需要注意，blur事件会先于click触发，所以blur的时候隐藏下拉框，会导致click不触发，所以blur事件中应该延迟隐藏下拉框

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 5

两种思路，都需要在 document 监听 click 事件

1. 在 click 时判断是否位于 select 内部

document.addEventListener('click', function(ev){
  // 这里 .select 表示 select 的类名
  if (!ev.target.closest('.select')) {
    // 关闭
  }
});

2. 在 select 内部阻止冒泡

document.addEventListener('click', function(ev){
  // 关闭
});

select.addEventListener('click', function(ev){
  ev.stopPropagation()
});

Answer 6

在 document 上添加点击事件就可以了

$(body).click(function(){
    // 关闭 select 选择框
})

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。