一直弄清楚这个效果如何实现,看了这篇博客的几行代码原来如此简单,就是利用了事件冒泡而已。

比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下:

$("#body").click(function(e) {
$(this).show();
e.stopPropagation();
});
$(document).click(function(event) { $("#body").hide();
});

如果div内点击隐藏,可采用jQuery的触发事件

$(document).trigger("click");

转自:http://blog.csdn.net/fengshizty/article/details/42674707

[转]JQuery控制div外点击隐藏,div内点击不会隐藏的更多相关文章

  1. jquery实现除指定区域外点击任何地方隐藏DIV

    <!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...

  2. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

  3. 由点击页面其它地方隐藏div所想到的jQuery的delegate

    对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...

  4. jquery点击非div区域隐藏div

    点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

  5. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  6. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  7. jquery点击其他地方隐藏div层的实现程序

    js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(funct ...

  8. React 点击按钮显示div与隐藏div,并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  9. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

随机推荐

  1. spring的介绍

    Spring是什么: Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用!!! Spring是一个轻量级的控制反转(Io ...

  2. 人力资源管理 winform C#

    主旨思想:数据库(增,删,改,查) 资源管理器目的:实现基本人员信息   存储,调用,查看头像,修改内容. 注意事项:   1.建立两个表格  (人员表(cold,name,bumen,phone,t ...

  3. Time - Time-interval Measurements

    public class TimeHelper { private long _start, _stop, _elapsed; /// <summary> /// 获取初始时间戳 /// ...

  4. .net core in Docker 部署方案(随笔)

    前一段时间由于项目需要 .net core 在docker下的部署,途中也遇到很多坑,看了各同行的博客觉得多多少少还是有些问题,原本不想写此篇文章,由于好友最近公司也需要部署,硬是要求,于是花了些时间 ...

  5. (一)用C或C ++扩展(翻译)

    用C或C ++扩展 如果你知道如何用C语言编程,那么为Python添加新的内置模块是很容易的.这种扩展模块可以做两件不能直接在Python中完成的事情:它们可以实现新的内置对象类型,以及调用C库函数和 ...

  6. [Algorithm]图

    一.图的算法 邻接矩阵表示的数据结构 1 #define INFINITY INT_MAX // 无穷大 2 #define MAX_VERTEX_NUM 20 // 限制顶点最大数值为20个 3 # ...

  7. Spring之BeanFactory与ApplicationConText

    :BeanFactory基本的工厂解析,管理,实例化所有容器内的bean的接口,spring中所有解析配置文件的类都直接或者间接实现该接口ApplicationContext接口implements ...

  8. 封装的一个sorted_vector示例,实现了stl::set的一部分接口

           STL set能保证最坏情况下的查找和插入效率,logN.但是维护红黑树开销较大.set内的元素按照一定的逻辑顺序组织,查找.插入等操作的结果都和排序规则有关.       适合STL ...

  9. P3230 [HNOI2013]比赛

    $ \color{#0066ff}{ 题目描述 }$ 沫沫非常喜欢看足球赛,但因为沉迷于射箭游戏,错过了最近的一次足球联赛.此次联 赛共N支球队参加,比赛规则如下: (1) 每两支球队之间踢一场比赛. ...

  10. [jvm]基于jvm的线程实现

    一.线程的实现 学过操作系统的肯定都知道: 进程:是并发执行的程序在执行过程中分配和管理资源的基本单位,是一个动态概念,竞争计算机系统资源的基本单位. 线程:是进程的一个执行单元,是进程内可调度实体. ...