<!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. SpringBoot使用Junit4单元测试

    SpringBoot2.0笔记 本篇介绍Springboot单元测试的一些基本操作,有人说一个合格的程序员必须熟练使用单元测试,接下来我们一起在Springboot项目中整合Junit4单元测试. 本 ...

  2. node--http小爬虫&事件模块

    //http小爬虫 var http=require('http') var cheerio=require('cheerio') var url='http://www.imooc.com/lear ...

  3. 随机生成指定长度字符字符串（C语言实现）

    相关函数 srand(), rand()头文件#include<stdlib.h> 定义函数 int rand(void) 函数说明 rand()会返回一随机数值,范围在0至RAND_MA ...

  4. python常用模块1

    一. 什么是模块: 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代码 ...

  5. BZOJ 4540 [Hnoi2016]序列 （单调栈 + ST表 + 莫队算法）

    题目链接  BZOJ4540 考虑莫队算法. 这题难在$[l, r]$到$[l, r+1]$的转移. 根据莫队算法的原理,这个时候答案应该加上 $cal(l, r+1) + cal(l+1, r+1) ...

  6. [原创][SW]TortoiseSVN创建本地版本控制

    1. 简介 TortoiseSVN是一个Windows平台下的Subversion用户端软件,以Windows shell extension的方式写成.它是自由软件,以GNU通用公共许可证发布.(f ...

  7. 10.【nuxt起步】-引用mintui

    这时候我们完成了list.vue,但是怎么返回index.vue,这时候需要这个头部返回 1.我们使用现成的minu-ui,eleme的开源移动端 ,参考 https://www.cnblogs.co ...

  8. Basic Vim Configuration

    原文: https://computers.tutsplus.com/tutorials/basic-vim-configuration--cms-21498 原来,vim的配置文件,.vimrc也是 ...

  9. 用Visual C++ 2010 载入动态链接库三部曲（使用第三方库的一般方法）

    以下以载入编译好的ACE动态链接库为例说明:这里如果你已经设置了环境变量ACE_ROOT ACE在VS2010下高速配置载入动态链接库三部曲:(这里如果你的ACE文件夹为E:\ACE_wrappers ...

  10. Odoo HRMS应用简介

    Odoo HRMS包含行政管理的大部分功能,包含 部门组织架构 员工清册 岗位规划以及招聘管理 用工合同 考勤管理 休假和加班 费用报销 员工考核 绩效.激励.培训成绩 薪资清册     个角色 角色 ...