诀窍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. Android Studio Beat版公布!

    Android Studio Beat版公布了! 速度比0.61快爆了,有木有! L也能更新了,炫爆了,有木有!

  2. 为什么Scrum不行?

    这篇文章的原文在这里(原文链接)(下文不是全译,也不是部分译,我只是把其总结,有我自己的发挥,但是原意大致不变),这篇文章完全是在调侃Scrum的,作者第一段就是一个免费声明,其说他是Scrum和其它 ...

  3. node.js&pm2搭建node生产环境

    node.js下载地址https://nodejs.org/en/download/stable/ 下载截图 建议采用稳定编译过的版本,source code稍麻烦,编译过的直接可用,安装超级简单,红 ...

  4. 第十一章 PhpMyAdmin连接远程mysql服务器---连接openwrt 703N服务器

    //千万不要在你原来的那个phpmyadmin文件夹上操作~~~要复制一个新的进行操作,这样我们就可以同时使用本地和远程   一.下载phpmyadmin到本地 我使用的是windows下的集成WAM ...

  5. 升级struts到2.5.2遇到的问题及解决方案

    原来的版本是2.3.x,由于安全原因需要升级到2.5.2.1,2.5.2版本不再提供xwork.jar ,整合到了 struts-core包中. 2,方法不能访问的问题,需要在每个action配置文件 ...

  6. OpenCV学习(14) 细化算法(2)

          前面一篇教程中,我们实现了Zhang的快速并行细化算法,从算法原理上,我们可以知道,算法是基于像素8邻域的形状来决定是否删除当前像素.还有很多与此算法相似的细化算法,只是判断的条件不一样. ...

  7. 教你用软碟通(UltraISO)刻录系统光盘

    用光盘装系统有几个好处:1.便携,显而易见,这是最大的优点2.大容量,比之维护光盘,可以集成N多维护工具,甚至还可以放下几个ghost镜像3.维护功能强大,因为容量大,可以放更多工具.还可以设置多重启 ...

  8. 130道ASP.NET面试题,我只会80道!

    1. 简述 private. protected. public. internal 修饰符的访问权限.答 . private : 私有成员, 在类的内部才可以访问. protected : 保护成员 ...

  9. html表格内容自动换行

    有时候表格会因为内容多少忽大忽小的很烦人,在网上搜了下解决方案,效果不错哦,给大家分享下!首先介绍两个利器:table-layout:fixed //固定表格大小word-break:break-al ...

  10. (笔试题)N!尾部连续0的个数

    题目: 对任意输入的正整数N,编写C程序求N!的尾部连续0的个数,并指出计算复杂度.如:18!=6402373705728000,尾部连续0的个数是3. (不用考虑数值超出计算机整数界限的问题) 思路 ...