html 实现点击窗口区域外关闭窗口功能

//添加关闭窗口函数
function Close(e){
    //检测目标是否在窗口外
//这里的add元素即为示例中的输入框
//如果点击的元素不包含在输入框内就执行else内的内容
    if(add.contains(e.target)){
    }else{
        add.classList.remove('active')
        bottom.classList.remove('hidden')
        document.body.removeEventListener('click',CancelAdd)//删除监听事件

    }

}




//获取主页面下方的添加按钮
const addBut = document.querySelector('.bottom .option .add')

//弹出添加页面
addBut.addEventListener('click',function(){

    if(!add.classList.contains("active")){

        add.classList.add("active")
        bottom.classList.add('hidden')
//添加延迟触发 不添加延迟我这里会发生点击的同时取消窗口
        setTimeout(() => {
            document.body.addEventListener('click',Close)//添加监听事件
            
        }, 100);
        
    }
})