诀窍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. JSON还原为结构体

    JSON还原为结构体 1)JSON字符串还原为结构体: 2)访问结构体的字段值: 本例运行效果图: uses SynCommons; const // JSON字符串 JSON1 = '{' + #1 ...

  2. windows下用Xshell远程登录Linux

    1.下载安装Xshell 2.右击打开终端,输入su ->口令切换到root 3.查看虚拟机IP 输入命令:ifconfig 若提示not found ,输入/sbin/ifconfig (ex ...

  3. 使用Proxmark3进行MIFARE Classic卡的安全测试

    使用Proxmark3进行MIFARE Classic卡的安全测试   Proxmark3的MIFARE安全测试是很多朋友都非常重视的一部分,所以我们特地以这个部分进行介绍,告诉大家如何当你完成前期操 ...

  4. Reverse Integer--整数的反转

    原题: Reverse digits of an integer. =>反转一个整数的数字.例子如下: Example1: x = 123, return 321 Example2: x = - ...

  5. DGN格式转化为shp格式 【转】

    其实本来,我就是需要把一个autocad的dwg/dgn格式的东西导入到google earth里面:但是首先我对dwg/dgn格式的东西根本就不熟:其次我拿到的dwg/dgn格式文件是用的HK80 ...

  6. 【属性动画示例】Property Animation

    MainActivity 属性动画常用操作 // 可操控的属性有:alpha:x/y:scaleX/scaleY:rotation/rotationX/rotationY:transitionX/tr ...

  7. SQL INTERSECT

    SQL INTERSECT is query that allows you to select related information from 2 tables, this is combine ...

  8. 根据轨迹线构造GPS点的方法

    在地理国情普查项目中,元数据中的轨迹线图层由外业GPS点转换构成.理论上,外业GPS轨迹点在采集时间.采集人员等方面应当保持一致.但是,由于管理上.操作上的原因导致有元数据轨迹线而外业GPS轨迹点的现 ...

  9. rtsp摘要认证协议(Response计算方法)

    rtsp摘要认证协议(Response计算方法) 说明: 例如:OPTIONS rtsp://192.168.123.158:554/11RTSP/1.0   RTSP客户端应该使用username ...

  10. 改善C#程序的建议2:C#中dynamic的正确用法

    dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...