诀窍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. Druid 连接泄漏监测

    当程序存在缺陷时,申请的连接忘记关闭,这时候,就存在连接泄漏了.Druid提供了RemoveAbandanded相关配置,用来关闭长时间不使用的连接.例如: 配置 <bean id=" ...

  2. Spring自动装配Beans

    在Spring框架,可以用 auto-wiring 功能会自动装配Bean.要启用它,只需要在 <bean>定义“autowire”属性. <bean id="custom ...

  3. 插值技术之Bezier插值(1) -- Bezier Curve

    作者:i_dovelemon 来源:CSDN 日期:2015 / 7 / 11 主题:Interpolate,Bezier Curve 引言 在游戏开发中.诸如动画系统.路径计算等等操作,都会遇到对数 ...

  4. linux 环境下git 命令小结

    转载自:http://blog.chinaunix.net/uid-28241959-id-3880025.html 本地建立仓库 先创建个文件夹,仓库的地点: mkdir cangkumkdir C ...

  5. 树状数组求第K小值 (spoj227 Ordering the Soldiers &amp;&amp; hdu2852 KiKi&#39;s K-Number)

    题目:http://www.spoj.com/problems/ORDERS/ and pid=2852">http://acm.hdu.edu.cn/showproblem.php? ...

  6. 第十四章 openwrt 安装 python

    需要安装libffi,python-mini,python.libffi以及python-mini需要安装在python之前     如果部分软件包不一样可以在下面的web后台搜索,搜索前先opkg ...

  7. 获取easyui calendar 属性

    <div id="cc" class="easyui-calendar" style="width:250px;height:250px;&qu ...

  8. @ERR Unsupported CONFIG parameter: notify-keyspace-events

    Caused by: redis.clients.jedis.exceptions.JedisDataException: ERR Unsupported CONFIG parameter: noti ...

  9. ubuntu下修改文件夹权限

    常用方法如下: sudo chmod 600 ××× (只有所有者有读和写的权限)sudo chmod 644 ××× (所有者有读和写的权限,组用户只有读的权限)sudo chmod 700 ××× ...

  10. C#中的数组【转】

    目录 数组的声明 数组的初始化 数组的访问 数组的常用属性和方法 为方便起见,以下数组均定义为整型 数组的声明 C#声明数组时,方括号[]必须跟在类型后面,而不是标识符后面 1. 声明一维数组 C#数 ...