<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>点击其它地方关闭DIV</title>

</head>

<body>

<input type="text" value=""  id="tf"/>

<div style="width:400px; height:200px;border:1px solid #000;display:none" id="con">

  <p>1111</p>

  <p><span>2222</span></p>

  <p><a href="#">3333</a></p>

</div>

<script src="./jquery.js"></script>

<script>

    $('#tf').click(function(e){

        $('#con').show();

        stopBubble(e);

        $(document).click(function(){

            $('#con').hide();

            //$(document).click=null;

        });

    });

    $('#con').click(function(e){

        //只阻止了向上冒泡，而没有阻止向下捕获，所以点击con的内部对象时，仍然可以执行这个函数

        stopBubble(e);

    });

    //阻止冒泡函数

    function stopBubble(e){

        if(e && e.stopPropagation){

            e.stopPropagation();    //w3c

        }else{

            window.event.cancelBubble=true; //IE

        }

    }

</script>

</body>

</html>

点击其它地方关闭DIV的更多相关文章

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

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

  2. vue自己写了一个div菜单，点击按钮展开，点击其他地方关闭这个div菜单

    需求是通过点击body页面,在其他地方就关闭这个<div>菜单,给这个div一个id:problemList,但是点击我打开的按钮,不关闭. created () { document.o ...

  3. jquery实现除指定区域外点击任何地方隐藏DIV

    <!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...

  4. jquery点击其他地方隐藏div层的实现程序

    js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(funct ...

  5. 点击其他地方隐藏div

    document.onclick = function(e){ var ele = e?e.target:window.event.srcElement; if(ele.id !== 'valueSh ...

  6. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

  7. 由点击页面其它地方隐藏div所想到的jQuery的delegate

    对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...

  8. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  9. 实例：vue中点击空白区域关闭某个div图层

    <template> <div class="search" ref="searchMain"> <el-input v-mode ...

随机推荐

  1. 在vue单页面应用当中使用sass

    之前在项目当中有使用过sass,但是使用的方式有点Low,是在vue文件当中的style下面通过@import的方式引入的. 其实在webpack当中也可以通过在main.js当中import &qu ...

  2. BNU 12846 LCM Extreme 最小公倍数之和（线性欧拉筛选+递推）

    LCM Extreme Time Limit: 3000ms Memory Limit: 131072KB   This problem will be judged on UVALive. Orig ...

  3. Java-Pi的几种实现

    1.无穷级数计算 p = 1 - 1/3 + 1/5 -1/7+..... π=4p 2.使用 Nilakantha 级数 π = 3 + 4/(2*3*4) - 4/(4*5*6) + 4/(6*7 ...

  4. HDU1724 Ellipse

    Math is important!! Many students failed in 2+2’s mathematical test, so let's AC this problem to mou ...

  5. 【BZOJ2243】染色（树链剖分）

    题意: 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段),如“112221”由 ...

  6. 【BZOJ1036】树的统计Count（树链剖分，LCT）

    题意:一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u v: ...

  7. Android4.2.2 动态显示隐藏屏幕底部的导航栏（对系统源码进行修改）

    需求如题. 在Android4.2.2中,导航栏(也就是屏幕底部的三个按钮,home,back,recentapp)是系统应用SystemUi.apk的一部分,简言之,我们的需求就是让我们的app来控 ...

  8. 对于drawRect使用，谨慎使用!

    #1.drawRect简介drawRect方法在UIView的使用上起着十分关键的作用.不知道大家注意过没有,每一次创建UIView子类文件时候,会有自动带有已注释的drawRect方法,也许从这一点 ...

  9. 安卓WebView在项目中总结

    一.简介 在安卓开发中我们会遇到许多处理网页的功能,以下就是我在实际中用到的分享给大家 1.显示和渲染Web页面 2.可和JavaScript交互调用 二.常用的方法 //激活WebView为活跃状态 ...

  10. win7dos删除文件和删除文件夹

    如果要删除呢?也简单:假设删除d盘下的123文件夹 del/s/q d:\123\*.* ----(用于删除文件夹下的子文件) rd/s/q d:\123 ----(用于删除文件夹) /s参数为子目录 ...