原生 js 模拟下拉弹框时, 实现弹框外空白处关闭弹框方案

背景:
给客户网站上加入埋点表单, js 中请求后端接口生成留言表单给客户网站访客填写

问题:
表单中有些字段是多选字段, 之前代码使用输入框 + 浮层 div , 勾选浮层 div 中的选项后显示到输入框, 点击输入框 trigger() 浮层 div ; 现在产品要求改为点击空白处关闭浮层

方案:

1. 给浮层 div 加上 tabIndex , 令其可 blur
2. 给输入框, checkbox , 浮层都加上 onblur
3. 在 onblur 中判断当前焦点是否还在这三者中, 可通过 document.activeElement , parentNode.contains 来判断
4. 注意: 因为事件优先级问题, onblur 可能不奏效, 可以试试在 onblur() 最外层加入 setTimeout 0 来触发