点击空白隐藏，设置目标区域，原生，jquery , vue三种写法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41619796/article/details/88557686

1、jquery中写法：

$(document).mouseup(function(e){

var _con = $(' 目标区域 '); // 设置目标区域

if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1

alert(1)// 功能代码

}

});

2、原生写法：

document.addEventListener('click',(e)=>{
        var  box = document.getElementById('box');//目标区域
        if(box.contains(e.target)){
            alert('在');
        }else{
            alert('不在');        
        }
    })

3、vue中写法：

<template>
  <div class="sectionTrees" ref="box">
  </div>
</template>
<script>
  export default {
   created(){
        document.addEventListener('click',(e)=>{
          if(this.$refs.box==undefined){
            return;
          }//如果不是设置目标区域不走方法，不限制会报错
          if(!this.$refs.box.contains(e.target)){
              this.show = false;
          }
        })
    }
  }
</script>