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

比如有个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. Android在一个app中启动另一个App

    Intent intent = new Intent(Intent.ACTION_MAIN); intent.addCategory(Intent.CATEGORY_LAUNCHER); Compon ...

  2. TriggerAction扩展----ExInvokeCommandAction

    Wp&Win8中使用命令绑定时,除了Button控件自带命令绑定,其他的时候是用Interactivity库中的InvokeCommandAction实现的(Win8 需要额外安装第三方NuG ...

  3. C#帮助类:Base64

    public class Base64 { #region Base64加密 ///<summary> ///Base64加密 ///</summary> ///<par ...

  4. dota有哪些经典的典故或笑话?

    ----------------------------------------------------dota有哪些经典的典故或笑话?虽然现在玩游戏也没什么热情了, 但是看到这些还是笑尿,笑点低 = ...

  5. EF进阶篇(三)——上下文

    前言 上下文,到底什么是上下文,且听我仔细吹来. 内容 在对EF实体进行关系操作的时候,第一步需要我们创建上下文实例对象,然后根据实体的变化进而通过上下文对该实体进行状态的修改,我的理解就是上下文就是 ...

  6. Jmeter_Beanshell_使用Java处理JSON块

    版权声明:本文为博主原创文章,转载请注明出处. [环境] ①Jmeter版本:3.2,JDK:1.8 ②前置条件:将json.jar包置于..\apache-jmeter-3.2\lib\下,并将该j ...

  7. luoguP4172 [WC2006]水管局长

    https://www.luogu.org/problemnew/show/P4172 考虑倒序处理所有操作 先把不会被删掉的边加入图中,LCT 维护最小生成树,再倒序插入每一条边,如果边的 ( l, ...

  8. Tomcat8.5安装教程

    如果第一次安装的用户请耐心阅读哈安装方法1.下载完成后开始安装,第一次安装的用户建议直接点击“next”不选择插件2.可以自行设置账户名以及密码3.非常重要的一步!!!!!!!!!设置jdk安装目录, ...

  9. 错误代码: 1142 REFERENCES command denied to user 'wuyong'@'localhost' for table 'orders'

    错误代码: 1142 REFERENCES command denied to user 'wuyong'@'localhost' for table 'orders' 原因:在使用SQLyog操作数 ...

  10. Python3入门之软件安装

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 最近将我的Python笔记整理下,希望能对他人有所帮助,这是第一课,安装入门篇: windows下安装Python 1.下载,从这里下载:[下载链 ...