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

比如有个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. element时间选择器插件转化为YYYY-MM-DD的形式

    let datete = new Date(this.form.value0);this.form.value0 =datete.getFullYear() +"-" +(date ...

  2. CentOS7 yum安装lamp环境

    1.安装apache yum install httpd #根据提示,输入Y安装即可成功安装 systemctl start httpd.service #启动apache systemctl sto ...

  3. 浅谈短视频APP的发展趋势

    2014年6月20日,在AppAnnie最新发布5月应用指数中,美拍荣登“非游戏类iOS榜单”全球下载量第一位置,成为全球iOS应用商店最热门APP.能在<AppAnnie应用指数>这份A ...

  4. SQL Server 根据关键字和结束符提取字符串子串

    /* @info-待截取的字符串 @indexStr-截取子串的起始字符串 @split-截取子串的结束符号 列入依次传入 胸片:正常.心电图:异常,需要注意.血常规检查:正常. 心电图 '.' 返回 ...

  5. LoadRunner---杂问题&接口测试

    问题1] 响应时间是系统完成事务执行准备后所采集的时间戳和系统完成待执行事务后所采集的时间戳之间的时间间隔,是衡量特定类型应用事务性能的重要指标,标志了用户执行一项操作大致需要多长时间.[问题2] 系 ...

  6. Django 实现网站注册用户邮箱验证功能

    我们在很多网站上都可以看到用户注册使用电子邮件激活或启用的方式.也就是说,用户在注册后填写正确的电子邮件地址,接着网站会发送一封启用电子邮件到用户设置的电子邮件的邮箱中,并在邮件中提供一个激活或启用的 ...

  7. Sample-Code:Translator

    <h2>My Spanish Translator</h2> <p> Enter your text in English:  </p> <p&g ...

  8. JDBC_PreparedStatement用法_占位符_参数处理

    import java.sql.Connection; import java.sql.Date;import java.sql.DriverManager;import java.sql.Prepa ...

  9. Docker - 使用 Nexus3 搭设私有 NuGet 仓库

    目录 前言 NuGet Nexus 私有仓库 说明 安装 Nexus 拉取 Nexus 镜像 运行 Nexus Nexus NuGet 仓库简单使用 Nexus 默认帐号 Repositories 上 ...

  10. 181114socke编程

    一.Socket Families 地址簇 socket.AF_UNIX socket.AF_INET socket.AF_INET6 二.Socker Types socket.SOCK_STREA ...