<!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. python中的 __xxx__ 方法

    1 __class__ instance.__class__ The class to which a class instance belongs def foo(): pass class A(o ...

  2. 58同城职位分类数据 json

    { "level0": {"0": "销售", "1": "客服", "2": ...

  3. linux内核之进程的基本概念(进程，进程组，会话关系）

    进程是操作系统的一个核心概念.每个进程都有自己唯一的标识:进程ID,也有自己的生命周期.一个典型的进程的生命周期如图4-1所示. 进程都有父进程,父进程也有父进程,这就形成了一个以init进程为根的家 ...

  4. VirtualBox 與 Vmware 差異

    VirtualBox 4.3.36_Ubuntu r105129 與 VMware® Workstation 12 Player  12.5.2 build-4638234, 分別在各自的 Ubunt ...

  5. POJ 1011:木棒

    传送门 http://poj.org/problem?id=1011 题目大意 已知原来有等长若干木棒,现在给你一堆断了的木棒的长度,问原来的木棒最短是多长 题目类型 DFS + 剪枝 + “贪心优化 ...

  6. Mongodb的使用（下）

    高级操作 讲解关于mongodb的高级操作,包括聚合.主从复制.分片.备份与恢复.MR 完成python与mongodb的交互 聚合 aggregate 聚合(aggregate)主要用于计算数据,类 ...

  7. java 正则表达式-忽略大小写与多行匹配

    Pattern.compile("'.*?'", Pattern.CASE_INSENSITIVE | Pattern.DOTALL);

  8. Careercup | Chapter 4

    二叉查换树,左孩子小于等于根,右孩子大于根. 完全二叉树,除最后一层外,每一层上的节点数均达到最大值:在最后一层上只缺少右边的若干结点. complete binary tree 满二叉树,完美二叉树 ...

  9. OAuth相关备注

    引用大神的资料,备注一下 http://www.cnblogs.com/dudu/tag/OAuth/

  10. 邁向IT專家成功之路的三十則鐵律 鐵律七：IT人效率之道-時間管理

    彷間有許多與時間管理方面的相關書籍與實務課程,但是究竟對於一位IT專業人士來說,甚麼樣的時間管理法則才是最有效率的呢?過去有許多IT朋友私下請教顧大俠這個問題,而顧大俠始終沒有很完整的分享這方面的經驗 ...