$(document).mouseup(function(e){
var _con = $(' 目标区域 '); // 设置目标区域
if(!_con.is(e.target) && _con.has(e.target).length === ){ // Mark 1
some code... // 功能代码
}
});
/* Mark 1 的原理:
判断点击事件发生在区域外的条件是:
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/
$el_box = $('.box');//弹出层
$el_box.click(function(e){
e.stopPropagation();//阻止弹出层的click事件,防止冒泡到body
}); $(document).one('click',function(e){//我的弹出层元素是动态载入的,使用过后就销毁了,所以用了one,可以使用bind
$el_box.remove();
});

关于点击空白关闭弹窗的js写法推荐?的更多相关文章

  1. 关于点击空白关闭弹窗的js写法推荐

    $(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 if(!_con.is(e.target) && ...

  2. jqeury点击空白关闭弹窗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 使用js冒泡实现点击空白处关闭弹窗

    什么是事件冒泡? 如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶 ...

  4. Flex里监听mouseDownOutside事件解决弹出窗口点击空白关闭功能

    其实当用户在使用 PopUpManager 打开的某个组件外部单击时,会从该组件分派一个mouseDownOutside事件 监听该事件就能实现点击空白处关闭窗口的功能 this.addEventLi ...

  5. vue 点击按钮弹窗,点击关闭按钮关闭弹窗。

    <div @click="btnfc()">点击弹窗按钮</div> <div v-show="show"> <div ...

  6. 【vue】vue +element 搭建项目,点击空白处关闭弹窗

    <template> <div class="step2"> <el-button @click="togglePanel($event)& ...

  7. Bootstrap 模态框 禁止点击空白关闭模态框事件

    在模态框的div中加上 aria-hidden="true" data-backdrop="static" <div class="modal ...

  8. 实例:vue中点击空白区域关闭某个div图层

    <template> <div class="search" ref="searchMain"> <el-input v-mode ...

  9. 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

    好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...

随机推荐

  1. Codevs 3305 水果姐逛水果街Ⅱ 倍增LCA

    题目:http://codevs.cn/problem/3305/  时间限制: 2 s   空间限制: 256000 KB   题目等级 : 钻石 Diamond 题解       题目描述 Des ...

  2. Node.js 初探

    概念 Node.js 是构建在Chrome javascript runtime之上的平台,能够很容易的构建快速的,可伸缩性的网络应用程序.Node.js使用事件驱动,非阻塞I/O 模式,这使它能够更 ...

  3. Grandpa's Estate - POJ 1228(稳定凸包)

    刚开始看这个题目不知道是什么东东,后面看了大神的题解才知道是稳定凸包问题,什么是稳定凸包呢?所谓稳定就是判断能不能在原有凸包上加点,得到一个更大的凸包,并且这个凸包包含原有凸包上的所有点.知道了这个东 ...

  4. android 加载图片防止内存溢出

    图片资源: private int fore[]; private int back[]; fore = new int[]{R.drawable.a0, R.drawable.a1, R.drawa ...

  5. ELK初学搭建(kibana)

    ELK初学搭建(kibana) elasticsearch logstash kibana ELK初学搭建 kibana 1.环境准备 centos6.8_64 mini IP:192.168.10. ...

  6. Media Queries 自适应布局展示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Windows 下OpenSSL 安装

    安装环境: .操作系统:Windows XP SP2 2.C++编译器:VC++ 6.0 下载: 下载ActivePerl  5.10.1.1007(最新的版本或较低的版本也可以): 下载地址:htt ...

  8. 嵌入式Linux系统Bootloader启动调试技术(回想)

    嵌入式系统搭建过程中,对于系统平台搭建project师最初的一步一般是移植Bootloader ,当然移植有几个级别,通常最常见的是參考的EVM 的硬件有了改动(如更改了FLASH ,更改了SDRAM ...

  9. android 38 Abdroid客户端和服务端交互

    服务端: package com.sxt.day05; import java.io.IOException; import java.util.ArrayList; import javax.ser ...

  10. MS SQL 性能优化

    http://blog.csdn.net/dba_huangzj/article/details/50455543