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

比如有个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. MongoDB整理笔记のCRUD

    添加 下面我们来建立一个test 的集合并写入一些数据.建立两个对象j 和t , 并保存到集合中去.在例子里 “>” 来表示是 shell 输入提示符    > j = { name : ...

  2. Spring jdbcTemplate RowMapper绑定任意对象

    RowMapper可以将数据中的每一行封装成用户定义的类,在数据库查询中,如果返回的类型是用户自定义的类型则需要包装,如果是Java自定义的类型,如:String则不需要,Spring最新的类Simp ...

  3. delphi计算两个时间差

    uses DateUtils; var S1, S2: string; T1, T2: TDateTime; D, H, M, S: Integer; Value: Int64; begin S1 : ...

  4. logback 常用参数配置详解

    logback 常用配置详解(二) <appender> <appender>: <appender>是<configuration>的子节点,是负责写 ...

  5. EF 完成指定数据迁移

    Update-Database -ConfigurationTypeName Bmw.Services.DealerService.WebApiHost.MigrationsOfDealerDB.De ...

  6. oracle转义用单引号

    参考:https://blog.csdn.net/learning_oracle_lh/article/details/46639507

  7. 【bzoj3309】DZY Loves Math 莫比乌斯反演+线性筛

    Description 对于正整数n,定义f(n)为n所含质因子的最大幂指数.例如f(1960)=f(2^3 * 5^1 * 7^2)=3, f(10007)=1, f(1)=0. 给定正整数a,b, ...

  8. memcached 和 redis 安装

    memcached 1.搭建好lnmp 2.安装依赖包 yum install -y libevent-devel 3.安装memcached $ cd /usr/local/src $ wget h ...

  9. 【ExecutorService】概述

    初试 今天做一个上传excel,后台异步导入数据功能,使用ExecutorService private final ExecutorService m_longPollingService; pub ...

  10. 三种timer控件的简单实例

    .system.windows.forms .system.threading.timer .system.timers.timer using System; using System.Collec ...