诀窍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. apt-get update 和 upgrade 的区别

    http://blog.csdn.net/duyiwuer2009/article/details/26983267

  2. vagrant多节点配置

    1.vagrantfile的配置 Vagrant.configure("2") do |config| config.vm.box = "xinjieLinux" ...

  3. 【JSP EL】EL表达式里日期按照格式显示

    转:http://blog.csdn.net/kaishuaige/article/details/8505174 JSP页面用EL表达式 输出date格式     1.头上引入标签 <%@ t ...

  4. EntityFramework:我想我需要和 Session.Save 语义一样的方法

    背景 EntityFramework 中 DbSet.Add 方法不会导致立即执行 insert 语句,这在长事务中非常有用,不过多数用例都是短事务的,为何我需要一个立即执行 insert 语句的方法 ...

  5. 8)Linux程序设计入门--线程操作

    )Linux程序设计入门--线程操作 前言:Linux下线程的创建 介绍在Linux下线程的创建和基本的使用. Linux下的线程是一个非常复杂的问题,由 于我对线程的学习不时很好,我在这里只是简单的 ...

  6. 2013ACM-ICPC杭州赛区全国邀请赛——Random Walk

    pid=4579" style="background-color:rgb(51,255,51)">题目链接 题意: n个点.依照题中给的公式能够求出随意两个点转移 ...

  7. add-strings

    https://leetcode.com/problems/add-strings/ package com.company; import java.util.LinkedList; import ...

  8. osglightpoint例子 [转]

    该例子演示了光点的效果,主要应用osgSim库中的LightPoint.LightPointNode. SequenceGroup.BlinkSequence,osgSim库属于仿真库,扩展库.应用o ...

  9. Fragment 生命周期 事务 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  10. .net使用自定义类属性

    .net中可以使用Type.GetCustomAttributes获取类上的自定义属性,可以使用PropertyInfo.GetCustomAttributes获取属性信息上的自定义属性. 下面以定义 ...