温故而知新 js 点击空白处关闭气泡
诀窍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 点击空白处关闭气泡的更多相关文章
- 使用js冒泡实现点击空白处关闭弹窗
什么是事件冒泡? 如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶 ...
- js点击空白处触发事件
我们经常会出现点击空白处关闭弹出框或触发事件 <div class="aa" style="width: 200px;height: 200px;backgroun ...
- js点击空白处弹窗消失
$(document).mousedown(function(e){ var _list = $('#pop'); if(!_list.is(e.target) && _list.ha ...
- 【vue】vue +element 搭建项目,点击空白处关闭弹窗
<template> <div class="step2"> <el-button @click="togglePanel($event)& ...
- js点击时关闭该范围下拉菜单之外的菜单
$(function(){ $(document).bind("click",function(e){ //id为menu的是菜单 if($(e.target).closest(& ...
- bootstrap禁用点击空白处关闭模态框
原博主地址:http://www.cnblogs.com/godlovelian/p/4530342.html
- Flex里监听mouseDownOutside事件解决弹出窗口点击空白关闭功能
其实当用户在使用 PopUpManager 打开的某个组件外部单击时,会从该组件分派一个mouseDownOutside事件 监听该事件就能实现点击空白处关闭窗口的功能 this.addEventLi ...
- 阻止Bootstrap 模态框(Modal)点击空白处时关闭
默认情况下点击空白处时会关闭模态框,添加data-backdrop="static"后可以阻止关闭
- BootstrapDialog点击空白处禁止关闭
在乐学一百的项目当中引用到了BootstrapDialog,其中后台发送短信时,为了防止管理员编辑了半天的短息,突然间因为点击某个空白区域导致丢失,所以在此禁用掉点击空白关闭弹出框. 主要属性为: c ...
随机推荐
- MySql清空表的方法介绍 : truncate table 表名
清空某个mysql表中所有内容 delete from 表名; truncate table 表名; 不带where参数的delete语句可以删除mysql表中所有内容,使用truncate tabl ...
- Python break 语句
Python break 语句 Python break语句,就像在C语言中,打破了最小封闭for或while循环. break语句用来终止循环语句,即循环条件没有False条件或者序列还没被完全递归 ...
- CSRF攻击演示
CSRF就是伪装成用户做坏事! 它的手段可能是: 一张引发邪恶请求的图片: <img src="http://localhost/demoA.php?money=500" / ...
- Python学习(七)面向对象 ——封装
Python 类的封装 承接上一节,学了Student类的定义及实例化,每个实例都拥有各自的name和score.现在若需要打印一个学生的成绩,可定义函数 print_score() 该函数为类外的函 ...
- 如何使用keepalived实现nginx双机热备
1.linux安装方法:yum -y install keepalived 配置开机启动:sudo chkconfig keepalived on 查看keepalivede运行日志:/var/lo ...
- Guava的使用
package guava; import java.io.File; import java.io.IOException; import java.util.ArrayList; import j ...
- CSS:CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...
- 一道有序洗牌的笔试题,阿里\UC等都用过
题目:给定一个已经降序排好序的正数数组,要求按「最小.最大.次小.次大……」的顺序重新排序.期望的时间复杂度为O(n),空间复杂度为O(1),即不能申请额外的数组. 例如:输入[7,6,5,4,3,2 ...
- IE、火狐导入收藏夹乱码解决方案
IE收藏夹导入Firefox书签后出现乱码的原因在于两个浏览器的收藏夹的html文件的编码方式不同,Firefox使用的是UTF-8编码,而IE是ASCII编码.故两者的收藏夹文件互相导入的时候会出现 ...
- Android -- 消息处理机制源码分析(Looper,Handler,Message)
android的消息处理有三个核心类:Looper,Handler和Message.其实还有一个Message Queue(消息队列),但是MQ被封装到Looper里面了,我们不会直接与MQ打交道,因 ...