<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>

		<style type="text/css">

			.main {

				width: 300px;

				height: 300px;

				background: red;

			}

			.content {

				width: 100px;

				height: 100px;

				background: blue;

			}

		</style>

		<script type="text/javascript">

//			$(function() {   //方法一

//				$("#showdiv").click(function(e) {

//					if($("#test").is(":hidden")) {

//						$("#test").fadeIn();

//						e ? e.stopPropagation() : event.cancelBubble = true;

//					}

//				});

//				$("#test").click(function(e) {

//					e ? e.stopPropagation() : event.cancelBubble = true;

//				});

//				$(document).click(function() {

//					$("#test").fadeOut();

//				});

//			})

//          $(function(){   //方法二

//          	$("#showdiv").click(function(e){

//          		alert(e.target.className);

//          		if(e.target.className!=="content"){

//          			$("#test").hide();

////          			$("#showdiv").hide();

//          		}

//          	})

//          	$("#test").click(function(){

//          		alert(1111);

//          		return false;  //阻止事件冒泡到父级DIV

//          	})

//          })

            $(function(){    //方法三

            	$("#showdiv").click(function(){

            		$("#test").hide();

            		return false;

            	})

            	$("#test").click(function(){

            		return false;

            	})

            })

		</script>

	</head>

	<body>

		<div id="showdiv" class="main">

			<div id="test" class="content">

			</div>

		</div>

	</body>

</html>

　　

点击div外面该div消失(二)的更多相关文章

  1. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  2. 点击div外面该div消失

    <head> <meta charset="UTF-8"> <title></title> <script type=&quo ...

  3. 21.JQ的监听事件（点击div外面可以让它消失）

    JQ的监听事件(点击div外面可以让它消失) //监听整个页面 $(document).bind("click", function() { //给需要的对象赋予事件 $(&quo ...

  4. 点击其它位置，div下拉菜单消失

    接下拉菜单那一篇: 加上点击其它位置,下拉菜单消失. 纯js写法: window.document.addEventListener('click', function(e) { var e = e ...

  5. 如何设计点击点击一个div，其他div做出对应反应，以及获取一个节点下的子节点

    <div id="show"> <div>1</div> <div>2</div> <div>3</d ...

  6. 点击自动显示/隐藏DIV代码。(简单实用）

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字.这类效果在互联网上应用得很多,但实现的方 ...

  7. 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  8. jquery点击非div区域隐藏div

    点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

  9. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

随机推荐

  1. SVM2---核函数的引入

    前边总结了线性SVM,最终转化为一个QP问题来求解.后来又考虑到非线性SVM,如果特征特别特别多的话,直接使用QP的话求解不了,我们经过一系列的转化,把这一问题转化为训练集大小n量级的QP问题. ht ...

  2. 如何在十分钟内插入1亿条记录到Oracle数据库？

    这里提供一种方法,使用 APPEND 提示,使得十分钟内插入上亿数据成为可能. -- Create table create table TMP_TEST_CHAS_LEE ( f01 VARCHAR ...

  3. [转]VS 2013 连接数据库报错 未能加载文件或程序集 Microsoft.SqlServer.Management.Sdk.Sfc

    原文链接:http://stackoverflow.com/questions/16906686/could-not-load-file-or-assembly-microsoft-sqlserver ...

  4. Windows XP SP3下编译安装openssl-1.1.0b

    软件需要: openssl-1.1.0b visual studio 2010(cn_visual_studio_2010_ultimate_x86_dvd_532347.iso) perl:Acti ...

  5. [转载] 散列表(Hash Table)从理论到实用（中）

    转载自:白话算法(6) 散列表(Hash Table)从理论到实用(中) 不用链接法,还有别的方法能处理碰撞吗?扪心自问,我不敢问这个问题.链接法如此的自然.直接,以至于我不敢相信还有别的(甚至是更好 ...

  6. IOS一些好的用户体验设置

    1,下载图片时,如果 用户操作UI,那么就停止子线程,用户停止操作子线程时,开启子线程继续下载. SDWebImage  :专门下载图片. 2,网络请求时.本地要进行一些验证,以减少服务器的压力.

  7. [[4], [5, 6, 7]]（Python）list的方法

    现在我们要学习一些Python的数据结构了,本节将主要学习列表(list)的用法 1.list的方法 list.append(x) 在list的末尾添加一个元素 >>> a=[1,2 ...

  8. Web 通信 之 长连接、长轮询（long polling）

    基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性. 一.什么是长连接.长轮询? 用通俗易 ...

  9. webstorm与SAE的svn仓库链接进行版本控制

    这里把我使用webstorm与SAE的svn仓库链接: 1.先得设置webstorm中的版本控制,File->Settings->Version Control->Subversio ...

  10. js学习-自定义函数、对象的字面量、json对象学习小结

    一.自定义对象的构造: var student=new Object(); //object是顶级对象,使用构造函数的方法创建一个对象,此处的意思是创建了一个学生的空对象 student.name=& ...