温故而知新 js 点击空白处关闭气泡

诀窍1:使用el.contains(e) 来判断点击的区域
诀窍2:使用mouseup

诀窍3:完成之后,移除事件

showpopover (e) {
  this.popover = !this.popover
  var closePopover = (event) => {
      if (!this.$refs.popover.contains(event.target)) {
          this.popover = false
          document.body.removeEventListener(‘mouseup‘, closePopover)
      }
  }
  document.body.addEventListener(‘mouseup‘,closePopover)
}

原文地址:https://www.cnblogs.com/CyLee/p/9049184.html

时间: 2024-10-12 15:56:57

温故而知新 js 点击空白处关闭气泡的相关文章

jQuery点击空白处关闭弹出窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>点击空白处关闭弹出窗口</title>

BootStrap 模态框禁用ESC关闭、禁用点击空白处关闭

<!--Edit Model--> <div id="AddProjectModel" class="modal inmodal" tabindex="-1" role="dialog" aria-hidden="true" data-keyboard="false"> </div> data-keyboard=false,禁用按ESC关闭,data-

点击空白处关闭弹出层

1. $(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 some code... // 功能代码 } }); /* Mark 1 的原理: 判断点击事件发生在区域外的条件是: 1. 点击事件的对象不是目标区域本身 2. 事件对象同时也不是目标区域的子元素 */ 2.  $

android 输入法 判断打开状态 点击空白处 关闭的处理

private boolean checkInputMethodVisible(View view){ InputMethodManager imm = (InputMethodManager) context .getSystemService(Context.INPUT_METHOD_SERVICE); if (imm.hideSoftInputFromWindow(view.getWindowToken(), 0)) { return true; } return false;}view是

js点击空白处弹窗消失

$(document).mousedown(function(e){ var _list = $('#pop'); if(!_list.is(e.target) && _list.has(e.target).length === 0){ $('#pop').hide(); } }); 判断点击事件发生在区域外的条件:1. 点击事件的对象不是目标区域本身2. 事件对象同时也不是目标区域的子元素

关于iOS 点击空白处关闭键盘(手势)

- (void)viewDidLoad { [super viewDidLoad]; UITapGestureRecognizer *gesture=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(CloseKeyBoard:)]; [self.view addGestureRecognizer:gesture]; } -(void)CloseKeyBoard:(UITapGestureRecognizer

vue 下拉框自定义 以及点击空白空白处关闭下拉框

html: <div class="divInput" v-close> <div class="input" @click="opensort"> <input v-model="sortvalue" type="text" placeholder="分类" /> <vicon :type="'triangle'" clas

模态框点击空白处不关闭

1 $('#myModal').modal({ 2 backdrop:'static',//点击空白处不关闭 3 keyboard: false,//按下ESC时不关闭 4 show:false//默认不显示 5 });

Js可点击展开关闭的广告代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>网页上可点击展开.关闭的左侧广告代码</t