点击其他区域隐藏弹出框效果

一般下拉框或者选择框，持久展示时会给用户显示的隐藏方式，如点击事件后。也可以添加隐式的隐藏方式，如点击弹出框之外的区域。

CSS方法-focus伪类

当触发的元素是可以focus，以输入框为例。

1. 可以将弹出框出现的时机设置在input:focus时，实现弹出的效果。当focus焦点转移的时候，实现隐藏效果。
2. 在弹出框容器上添加hover事件，选择点击弹出框内容时不会隐藏，保证弹出框的点击事件可以触发。
3. 当选中弹出框中的项时，input焦点转移，hover事件保证弹出框显示，可以触发点击事件。然后点鼠标移出弹出框区域后，弹出框hover失效，隐藏。
   缺点：
   隐藏可能不太流畅；触发的元素只能是能加focuse的元素

    <div class="selectorswarp">
      <label for="input">输入框：</label>
      <input type="text"  class="selectinput" id="input"/>
      <ul class="selectors" @click="clickli">
        <li>s1</li>
        <li>s2</li>
        <li>s3</li>
      </ul>
    </div>
.selectinput:focus{
  &+.selectors{
    display: block;
  }
}
.selectors{
  background-color: #42b983;
  height: auto;
  display: none;
  &:hover{
    display: block;
  }
}

或者使用:focus-within直接加在input元素的warp元素上.

JS方法-contains函数

Node.contains;
使用contains方法可以判断一个元素是否是判断元素的后代元素。可以在document上添加点击的监听事件，若事件的触发元素不是弹出框的后代元素，则隐藏弹出框。若是，则持续展示弹出框。

let listerSelectWarp = (e)=>{
  let target = e.target,
    selectorwrap = document.querySelector('.selectorswarp');
  showoptions.value = selectorwrap.contains(target);
  console.log('listerSelectWarp',selectorwrap.contains(target));
}
document.addEventListener('click',listerSelectWarp,);

注意：
当容易内部还有其他点击控制弹出框事件时，需要注意选择addEventListener的useCapture项，选择事件的触发方向。
缺点：
展示时需要比较明确事件的触发，比如点击事中添加类或变量控制。展示和隐藏需要控制同一样式或变量。