点击页面空白处地方,隐藏弹窗

1原生方法

// html

<div id="box" style="width:110px;height:110px;</div>

//js------js的contains方法用来查看dom元素的包含关系,

document.addEventListener('click',(e)=>{
  alert('zhixing')
  var box = document.getElementById('box');
  if(box.contains(e.target)){
    alert('在内');
  }else{
    alert('在外'); 
  }
})

 document.addEventListener('click',(e)=>{
  alert('zhixing')
  var box = document.getElementById('box');
  if(e.target.className===‘box’){
    alert('在内');
  }else{
    alert('在外'); 
  }
})

2、 vue 写法

//html

<div id="box" ref="box" style="width:110px;height:110px;</div>

//js  ----ref是vue获取DOM元素的方法,在标签上绑定ref属性,js在组件内部用this.$refs.ref的值,调用。


created(){
  document.addEventListener('click',(e)=>{
    console.log(this.$refs.box.contains(e.target));
    if(!this.$refs.box.contains(e.target)){
      this.isShowDialog = false;
    }
  })
}

原文:https://blog.csdn.net/cxz792116/article/details/79415544

 

3vue

  给最外层的div加个点击事件 @click="userClick=false"

  给点击的元素上面加上:@click.stop="userClick=!userClick" //vue click.stop阻止点击事件继续传播//自测直接@click.stop阻止冒泡即可

或者给子元素js事件里

click(e)=>{

  e.stopPropagation();//阻止事件冒泡

  this.userClick = !this.userClick;

}

 

亲测有用哈~

posted @ 2019-07-31 18:13  徐念念  阅读(2527)  评论(0编辑  收藏  举报