诀窍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. Coreseek:区段查询及增量索引取代实时索引

    1.区段查询 索引系统须要通过主查询来获取所有的文档信息,一种简单的实现是将整个表的数据读入内存,可是这可能导致整个表被锁定并使得其它操作被阻止(比如:在MyISAM格式上的INSERT操作),同一时 ...

  2. vue项目条形码和二维码生成工具试用

    项目开发需要,优惠券分不同类型,简单的使用id生成条形码供店铺使用,麻烦点的需要多个字段的就需要使用二维码来展示了,对应的效果如下 条形码(一维码)使用工具code128 需引入code128.js ...

  3. [Android 源码] Android源码下载

    Android源码下载 为了能够顺利的下载Android的源码,同时也为了避免在网络上再次搜寻如何下载源码的麻烦,我把下载过程记录在这篇文档中. 官网中也有详细的介绍: http://source.a ...

  4. mysql中避免使用保留字和关键字做列的名字

    设计数据表时,应尽量避免使用MySQL的关键字和保留字作为表名或列名. 比如key和keys为保留字,如果不小心使用关键字或者保留字作为列名字,执行下面的语句会出现语法错误: select * fro ...

  5. python的单元测试框架

    1.unittest是Python内置的标准类库.它的API跟Java的JUnit..net的NUnit,C++的CppUnit很相似.   通过继承unittest.TestCase来创建一个测试用 ...

  6. BZOJ 2179 FFT快速傅立叶 题解

    bzoj 2179 Description 给出两个n位10进制整数x和y,你需要计算x*y. [题目分析] 高精裸题.练手. [代码] 1.手动高精 #include<cstdio> # ...

  7. Spark学习散点总结

    使用Spark 时,通常会有两种模式.一.在交互式编程环境(REPL, a.k.a spark-shell)下实现一些代码,测试一些功能点.二.像MapReduce 那样提前编写好源代码并编译打包(仅 ...

  8. RUP(Rational Unified Process),统一软件开发过程

    RUP(Rational Unified Process),统一软件开发过程 https://baike.baidu.com/item/RUP/8924595?fr=aladdin RUP最重要的它有 ...

  9. leetCode 42.Trapping Rain Water(凹槽的雨水) 解题思路和方法

    Trapping Rain Water Given n non-negative integers representing an elevation map where the width of e ...

  10. 算法笔记_039:杨辉三角形(Java)

    目录 1 问题描述 2 解决方案 1 问题描述 问题描述 杨辉三角形又称Pascal三角形,它的第i+1行是(a+b)i的展开式的系数. 它的一个重要性质是:三角形中的每个数字等于它两肩上的数字相加. ...