自己使用div模拟select,有如下需求:
- 组件获得焦点时,自动弹出下拉菜单
- 鼠标点击下拉菜单时,下拉菜单不能收回
- 鼠标点击输入框时,下拉菜单不能收回
- 鼠标点击其他任何地方或者组件失去焦点时,下拉菜单自动收回
核心问题就是判断鼠标点击事件是否在组件的dom树中发出,主要代码如下:
const app = document.body
let flag = false
\\创建回调逻辑
onClick = function(e) {
return flag = document.getElementById("id").conatins(e.target)
}
\\添加事件监听器
app.addEventListener('click', onClick, true)
\\删除监听器
app.removeEventListener('click', onClick, true)
整个过程很简单,就是给根元素增加一个点击事件监听器,绑定一个处理函数,每当触发点击事件之后就检查点击的元素在不在组件的dom元素树种,如果不在就将标记改为否,反之就改为真。