<!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. 卡牌游戏（bzoj 3191）

    Description   N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字 ...

  2. C#.net制作验证码（英文与数字组成的4位随机数），以及MD5值的使用

    原文发布时间为:2008-09-22 -- 来源于本人的百度文章 [由搬家工具导入] 参考资料：http://www.cnblogs.com/gwazy/articles/139510.html 三个 ...

  3. Error querying database找不到数据库的错误可能发生的原因..

    这个问题纠结了大概两个小时.原因是这样的,我刚刚换了一台新的电脑,准备把以前电脑上自己搭建的小项目放到新电脑上面,用myeclipse引入项目之后,启动项目在浏览器跑起来.然后输入账号密码登录主页,报 ...

  4. JVM指令详解（下）

    九.自增减指令 该指令用于对本地(局部)变量进行自增减操作.该指令第一参数为本地变量的编号,第二个参数为自增减的数量. 比如对于代码:                 int d=10; d++; d ...

  5. 【Windows API】OpenClipboard --- 剪切板（转）

    原文转自 http://www.cnblogs.com/wind-net/archive/2012/11/01/2749558.html 剪切板:系统维护的一个全局公共内存区域.每次只允许一个进程对其 ...

  6. Codeforces 403D: Beautiful Pairs of Numbers（DP）

    题意:转换模型之后,就是1~n个数中选k个,放到一个容量为n的背包中,这个背包还特别神奇,相同的物品摆放的位置不同时,算不同的放法(想象背包空间就是一个长度为n的数组,然后容量为1的物体放一个格子,容 ...

  7. LeetCode OJ--Binary Tree Level Order Traversal

    http://oj.leetcode.com/problems/binary-tree-level-order-traversal/ 树的层序遍历,使用队列 由于树不是满的,还要分出每一层来,刚开始给 ...

  8. babel ---- presets字段设定转码规则

    presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装. # ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # re ...

  9. URAL - 1860 Fiborial

    Discription Consider a sequence F i that satisfies the following conditions:  Find the number of dif ...

  10. python学习笔记之heapq内置模块

    heapq内置模块位于./Anaconda3/Lib/heapq.py,提供基于堆的优先排序算法 堆的逻辑结构就是完全二叉树,并且二叉树中父节点的值小于等于该节点的所有子节点的值.这种实现可以使用 h ...