温故而知新 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 ...
随机推荐
- iis实现点击文件下载而不是打开文件
我们平时在搭建网站时,企业网站难免会做一些文档提供给用户下载,有时候我们会遇到提供EXE文件给客户下载时 客户打开文档链接时提示“无法找到该网页”也就是说我们的IIS环境不能下载EXE文件: IIS网 ...
- 【mybatis】mysql级联更新两个表或多张表的数据
例如 info表和relation表有关联,现在要在一个sql语句中同时级联更新两张表的数据 update security_code_info info LEFT JOIN security_cod ...
- CSS:用SASS(SCSS)实现栅格系统
背景 在CSS:用Less实现栅格系统中我介绍了如何用LESS实现栅格系统,为啥还要再用SASS做一遍呢?Bootstrap+JQuery+Less做前端(以读取为目的),ExtJs+Sass做后台( ...
- Selenium2+python自动化70-unittest之跳过用例(skip)
前言 当测试用例写完后,有些模块有改动时候,会影响到部分用例的执行,这个时候我们希望暂时跳过这些用例. 或者前面某个功能运行失败了,后面的几个用例是依赖于这个功能的用例,如果第一步就失败了,后面的用例 ...
- Android之获取内外部存储器的容量
先来了解一下存储卡的相关知识: 我们新购买的磁盘或SD卡在使用之前,要让操作系统认得它,须先写入一些磁性的记号到磁盘上的每一扇区,便可在该操作系统下取用磁盘上的数据,这个过程就是格式化. 格式化可以直 ...
- 卷积神经网络CNN 手写数字识别
1. 知识点准备 在了解 CNN 网络神经之前有两个概念要理解,第一是二维图像上卷积的概念,第二是 pooling 的概念. a. 卷积 关于卷积的概念和细节可以参考这里,卷积运算有两个非常重要特性, ...
- 实现SQL Server中的切割字符串SplitString函数
有时我们要用到批量操作时都会对字符串进行拆分,可是SQL Server中却没有自带Split函数,所以要自己来实现了.没什么好说的,需要的朋友直接拿去用吧 SET ANSI_NULLS ON GO S ...
- CC+语言 struct 深层探索——CC + language struct deep exploration
1 struct 的巨大作用 面对一个人的大型C/C++程序时,只看其对struct 的使用情况我们就可以对其编写者的编程经验进行评估.因为一个大型的C/C++程序,势必要涉及一些(甚至 ...
- vue父组件异步传递prop到子组件echarts画图问题踩坑总结
效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...
- 【Linux】shell判空
在shell中如何判断一个变量是否为空 博客分类: Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux 在shell中如 ...