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

比如有个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. delphi 创建DLL文件 及其调用和注意事项

    首先创建一个DLL文件,项目自带的代码为: library ProjectPnr; { Important note about DLL memory management: ShareMem mus ...

  2. JQuery中一些常用函数的运用

    一.JQuery的效果介绍 二.定时弹出广告图片JQ部分代码 <script type="text/javascript"> var time; $(function( ...

  3. JSON Assertion(JSON断言)

    JSON断言允许你完成对JSON文档的校验,首先,如果如果数据不是JSON,则会解析失败:其次,JMeter会用指定语法寻找指定的path,如果没有找到,则会失败:第三,如果验证期望值为null,JM ...

  4. Redhat7无法启动mysql

    是这样的,7的这个环境安装了叫MariaDB了 安装MariaDB之后必须先启动MariaDB [root@redhatx ~]# yum -y install mysql [root@redhatx ...

  5. ClickOnce发布包含某文件

    第一步.在文件上右键选择“属性”,“复制到输出目录”选择“始终复制”: 第二步.“生成操作”选择“选择”: 第三步.通过 项目右键属性-发布-应用程序文件 查看想要包含的文件是否包含进来了. 注:可以 ...

  6. python 面向对象十一 super函数

    python 面向对象十一 super函数   super函数用来解决钻石继承. 一.python的继承以及调用父类成员 父类: class Base(object): def __init__(se ...

  7. mongoengine使用示例

    #!/usr/bin/env python # -*- coding: utf-8 -*- ''' Created on 2017年10月19日 @author: zzy ''' from mongo ...

  8. 3、pandas

    原文出处: pandas.pydata.org   译文出处:石卓林 这是关于pandas的简短介绍,主要面向新用户.可以参阅Cookbook了解更复杂的使用方法. 链接:http://python. ...

  9. 利用EFCore 封装Repository(可扩展不同数据的sql操作)

    本篇是对EFCore 进行下封装并实现基本的增删改查的同步异步方法及针对不同数据库的批量插入.sql语句直接操作数据库: 一. 先定义基础仓储接口IRepository public interfac ...

  10. FTP 两种连接模式

    简介 FTP协议要用到两个TCP连接, 一个是命令连接,用来在FTP客户端与服务器之间传递命令:另一个是数据连接,用来上传或下载数据.通常21端口是命令端口,20端口是数据端口.当混入主动/被动模式的 ...