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

比如有个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. .Net Core .Net Core V1.0 创建MVC项目

    .Net Core V1.0 创建MVC项目 创建MVC项目有两种方式: 一.创建Web项目:(有太多没用的东西要去删太麻烦) 2.项目目录结构: 此种方法要注意的是,会创建好多个json文件,下面就 ...

  2. 【大数据之数据仓库】安装部署GreenPlum集群

    本篇将向大家介绍如何快捷的安装部署GreenPlum测试集群,大家可以跟着我一块儿实践一把^_^ 1.主机资源 申请2台网易云主机,操作系统必须是RedHat或者CentOS,配置尽量高一点.如果是s ...

  3. Nginx conf基本配置

    #定义Nginx运行的用户和用户组 user www www;   #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8;   #全局错误日志定义类型,[ debu ...

  4. WebJars——web端静态资源的jar包

    1.WebJars介绍 Web前端使用了越来越多的JS或CSS,如jQuery,Backbone.js和Bootstrap.一般情况下,我们是将这些Web资源拷贝到Java Web项目的webapp相 ...

  5. Delphi XE8中Delphi和JAVA数据类型对应关系!

    Delphi XE8中Delphi和JAVA数据类型对应关系所在单元文件:Androidapi.JNI.JavaTypes 对应关系: JObject = interface;//java.lang. ...

  6. IO模型《二》阻塞IO

    阻塞IO(blocking IO) 在linux中,默认情况下所有的socket都是blocking,一个典型的读操作流程大概是这样: 当用户进程调用了recvfrom这个系统调用,kernel就开始 ...

  7. 【转】VS2010中无System.Data.OracleClient引用的问题

    源地址:http://blog.csdn.net/pinchw/article/details/30465749

  8. python 安装虚拟环境步骤

    1.python3.6.3 注: 1.安装的时候,装上你的pip 2.安装的时候,把环境变量记得勾选 3.如果你手动更改安装位置,更改到随意的盘根目录下 2.MySQL      pycharm最好安 ...

  9. win10+anaconda环境下pyqt5+qt tools+eric6.18安装及汉化过程

    最近需要用python编写一个小程序的界面,选择了pyqt5+eric6的配套组合,安装过程中遇到一些坑,特此记录.参考书籍是电子工业出版社的<PyQt5快速开发与实战>. 因为我使用an ...

  10. C#调用存储过程的ADO.Net

    using System.Data.SqlClient; //如果存储过程没有输入和输出参数,而且不返回查询结果 SqlCommand cmd = new SqlCommand("存储过程名 ...