<!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. 深入理解js——隐式原型

    每个函数都有一个prototye(原型),而每个对象都有一个_proto_,可成为隐式原型. _proto_是一个隐藏的属性,javascript不希望开发者用到这个属性值,有的低版本浏览器甚至不支持 ...

  2. Jqurey DOM 操作详解

    一.获取 1.获取内容----.text()  .html()   .value() text() - 设置或返回所选元素的文本内容                         格式:$(选择器) ...

  3. 在VMware上安装Ubuntu14.04 , Docker

    最近在公司做了一个关于 How to use Docker to deploy a java-based website 的KT,总结如下: 准备材料(Linux+64bit) 1. Tomcat安装 ...

  4. [2015hdu多校联赛补题]hdu5303 Delicious Apples

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5303 题意:在一个长为L的环形路径上种着一些苹果树,告诉你苹果树的位置(题目中以0~L指示坐标)及苹果 ...

  5. Xml文件操作的其中一个使用方法:

    XmlNodeList students = doc.DocumentElement.ChildNodes;//Student节点集合 foreach (XmlNode stu in students ...

  6. HTML中doctype以及target论述

    首先,为什么要在每个html文档开头写入<!doctype......>呢.                                                         ...

  7. Oracle游标带参数

    Oracle游标是可以带参数的,而SqlServer的游标就不可以了 create or replace procedure a as cursor b(c_id int)is select * fr ...

  8. POJ 2983 Is the Information Reliable? 差分约束

    裸差分约束. //#pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #i ...

  9. CentOS6.4完全安装FFmpeg手记

    鼓捣媒体的人对FFmpeg应该不会陌生,它不仅功能强大,结构优美,灵活.易扩展,也是很其他多媒体播放器的基础,例如VLC,Mplayer等等,还有好多商业播放器都用了ffmpeg,但这些商业软件却没有 ...

  10. c++垃圾回收代码练习 引用计数

    学习实践垃圾回收的一个小代码 采用引用计数 每次多一个指针指向这个分配内存的地址时候 则引用计数加1 当计数为0 则释放内存 他的难点在于指针之间的复制 所有权交换 计数的变化 #include &l ...