诀窍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)
}

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

  1. 使用js冒泡实现点击空白处关闭弹窗

    什么是事件冒泡? 如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶 ...

  2. js点击空白处触发事件

    我们经常会出现点击空白处关闭弹出框或触发事件 <div class="aa" style="width: 200px;height: 200px;backgroun ...

  3. js点击空白处弹窗消失

    $(document).mousedown(function(e){ var _list = $('#pop'); if(!_list.is(e.target) && _list.ha ...

  4. 【vue】vue +element 搭建项目,点击空白处关闭弹窗

    <template> <div class="step2"> <el-button @click="togglePanel($event)& ...

  5. js点击时关闭该范围下拉菜单之外的菜单

    $(function(){ $(document).bind("click",function(e){ //id为menu的是菜单 if($(e.target).closest(& ...

  6. bootstrap禁用点击空白处关闭模态框

    原博主地址:http://www.cnblogs.com/godlovelian/p/4530342.html

  7. Flex里监听mouseDownOutside事件解决弹出窗口点击空白关闭功能

    其实当用户在使用 PopUpManager 打开的某个组件外部单击时,会从该组件分派一个mouseDownOutside事件 监听该事件就能实现点击空白处关闭窗口的功能 this.addEventLi ...

  8. 阻止Bootstrap 模态框(Modal)点击空白处时关闭

    默认情况下点击空白处时会关闭模态框,添加data-backdrop="static"后可以阻止关闭

  9. BootstrapDialog点击空白处禁止关闭

    在乐学一百的项目当中引用到了BootstrapDialog,其中后台发送短信时,为了防止管理员编辑了半天的短息,突然间因为点击某个空白区域导致丢失,所以在此禁用掉点击空白关闭弹出框. 主要属性为: c ...

随机推荐

  1. 【转】2012年7月12 – 腾讯公司 WEB高级应用开发工程师 最新面试题

    腾讯面试(WEB高级应用开发工程师<PHP>)非答案啊!!! 开始正题之前,容博主啰嗦两句吧,呵呵.(你也可跳过直接到红色字体看题!) 腾讯一直是我很敬重的企业,尽管小企鹅在战略上饱受争议 ...

  2. struts2类型转化器详解(带例子)

    Struts2有两种类型转化器: 一种局部,一种全局. 如何实现: 第一步:定义转化器 第二部:注册转化器 下面做一个局部类型转化器的实例. 我们在上面一片日志说过有个变量date类型的.只有我们输入 ...

  3. Android支付接入之Google In-app-Billing

    原文链接:http://www.mobile-open.com/2016/966337.html 因为公司需要接入Google的应用内支付(即Google的in-app Billing V3),接入过 ...

  4. Openshift 3.11和LDAP的集成

    1. OpenLDAP的安装 只记录主要步骤,详细可参考 https://access.redhat.com/solutions/2484371 # yum install -y openldap o ...

  5. 开始学习深度学习和循环神经网络Some starting points for deep learning and RNNs

    Bengio, LeCun, Jordan, Hinton, Schmidhuber, Ng, de Freitas and OpenAI have done reddit AMA's.  These ...

  6. JNI字段描述符

    “([Ljava/lang/String;)V” 它是一种对函数返回值和参数的编码.这种编码叫做JNI字段描述符(JavaNative Interface FieldDescriptors).一个数组 ...

  7. go语言基础之字符串类型 和 字符与字符串类型的区别

    1.字符串类型 示例1: package main //必须有一个main包 import "fmt" func main() { var str1 string str1 = & ...

  8. JSP学习笔记(五):日期处理、页面重定向、点击量统计、自动刷新和发送邮件

    一.JSP 日期处理: 使用JSP最重要的优势之一,就是可以使用所有Java  API.本节讲述Java中的Date类,它在java.util包下,封装了当前日期和时间. Date类有两个构造函数.第 ...

  9. C# 怎么显示中文格式的星期几

    1.DateTime.Now.ToString("dddd",new System.Globalization.CultureInfo("zh-cn")); 2 ...

  10. 最短路径算法(Dijkstra)

    1.建立矩阵,记录任意两点间的直接距离: 2.两个集合,一个集合记录到每个点的最短路径,一个记录前驱节点: 3.主循环,每次找当前点与其他点的距离,记录下最短距离和前驱节点,然后看看通过前驱节点和最短 ...