温故而知新 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 ...
随机推荐
- 几个未公开的 DBCC 命令
http://blog.csdn.net/CathySun118/article/category/538610 https://ask.hellobi.com/blog/lyhabc/1612 1. ...
- mysql-connector-odbc-8.0.11-winx64.msi安装失败
mysql-connector-odbc-8.0.11-winx64.msi安装失败 提示需要Redistributable for Visual Studio 2015 去下载 vc_redist. ...
- jquery开发之第一个程序
前一段时间学习了js和css.可是发现好多的程序里面都用到了jquery当时本来想着先吧js弄熟了 再搞这个.后来发现不行,好多的程序好像是有益和自己为难似的,所以我决定接下来认认真真的把jquery ...
- cocos2d-x hello world及安卓平台迁移
本节和大家一起新建一个项目工程,并通过cygwin迁移至android平台. 以下是本节主要内容: 利用cocos2d-x自带脚本,生成测试工程,并测试运行: 将该测试项目通过cyg ...
- inno setup检查是否已经安装
[Registry] Root: HKLM; Subkey: "Software\MCS"; ValueType: string; ValueName: "MCSVers ...
- Android RecyclerView (一) 使用完全解析
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45059587: 本文出自:[张鸿洋的博客] 概述 RecyclerView出现 ...
- Linux进程间通信—共享内存
五.共享内存(shared memory) 共享内存映射为一段可以被其他进程访问的内存.该共享内存由一个进程所创建,然后其他进程可以挂载到该共享内存中.共享内存是最快的IPC机制,但由于linux本身 ...
- Python Seaborn 笔记
Seaborn是Python的一个制图工具库,在Matplotlib上构建,支持numpy和pandas的数据结构可视化. 他有多个内置的主题,颜色的主题 可视化单一变量,二维变量用于比较各个变量的分 ...
- 自定义控件 淘宝头条【ViewFlipper】
简易版 代码 ); tv.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Acti ...
- Mongodb 常用命令2
1.把一个collection里面的数据复制到另一个collection中,比如category集合中数据备份到category_clone中 db.category.find().forEach(f ...