诀窍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. 几个未公开的 DBCC 命令

    http://blog.csdn.net/CathySun118/article/category/538610 https://ask.hellobi.com/blog/lyhabc/1612 1. ...

  2. mysql-connector-odbc-8.0.11-winx64.msi安装失败

    mysql-connector-odbc-8.0.11-winx64.msi安装失败 提示需要Redistributable for Visual Studio 2015 去下载 vc_redist. ...

  3. jquery开发之第一个程序

    前一段时间学习了js和css.可是发现好多的程序里面都用到了jquery当时本来想着先吧js弄熟了 再搞这个.后来发现不行,好多的程序好像是有益和自己为难似的,所以我决定接下来认认真真的把jquery ...

  4. cocos2d-x hello world及安卓平台迁移

        本节和大家一起新建一个项目工程,并通过cygwin迁移至android平台.      以下是本节主要内容: 利用cocos2d-x自带脚本,生成测试工程,并测试运行: 将该测试项目通过cyg ...

  5. inno setup检查是否已经安装

    [Registry] Root: HKLM; Subkey: "Software\MCS"; ValueType: string; ValueName: "MCSVers ...

  6. Android RecyclerView (一) 使用完全解析

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45059587: 本文出自:[张鸿洋的博客] 概述 RecyclerView出现 ...

  7. Linux进程间通信—共享内存

    五.共享内存(shared memory) 共享内存映射为一段可以被其他进程访问的内存.该共享内存由一个进程所创建,然后其他进程可以挂载到该共享内存中.共享内存是最快的IPC机制,但由于linux本身 ...

  8. Python Seaborn 笔记

    Seaborn是Python的一个制图工具库,在Matplotlib上构建,支持numpy和pandas的数据结构可视化. 他有多个内置的主题,颜色的主题 可视化单一变量,二维变量用于比较各个变量的分 ...

  9. 自定义控件 淘宝头条【ViewFlipper】

    简易版 代码 ); tv.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Acti ...

  10. Mongodb 常用命令2

    1.把一个collection里面的数据复制到另一个collection中,比如category集合中数据备份到category_clone中 db.category.find().forEach(f ...