<!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. Spring定义的五种事务隔离级别

    在Spring中定义了5中不同的事务隔离级别. 1. ISOLATION_DEFAULT(一般情况下使用这种配置既可) 这是一个PlatfromTransactionManager默认的隔离级别,使用 ...

  2. Linux内核之网络

    应用层: 套接字将Unix一切都是内核的概念应用到网络连接中,内核跟用户空间套接字之间的接口实现在c的标准库中,使用了socketcall系统调用. socketcall充当了一个多路分解器,将各种任 ...

  3. Nginx没有启动文件、nginx服务不支持chkconfig、nginx无法自启

    Nginx没有启动文件.nginx服务不支持chkconfig.nginx无法自启 问题描述: Nginx安装后,当想要设置Ngixn为开机启动时, 就需要把nginx的启动命令路径放到/etc/rc ...

  4. HDU 1011 Starship Troopers (树dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1011 题意: 题目大意是有n个房间组成一棵树,你有m个士兵,从1号房间开始让士兵向相邻的房间出发,每个 ...

  5. [功能集锦] 001 - java下载文件

    @RequestMapping("/downloadxls.action") public void downloadxls(HttpServletRequest request, ...

  6. 笔记-迎难而上之Java基础进阶4

    内部类创建多线程 //匿名内部类创建多线程 public class InnerClassThread{ public static void main(String[] args){ //回忆一下之 ...

  7. MQTT协议介绍

    http://docs.oasis-open.org/mqtt/mqtt/v3.1.1/os/mqtt-v3.1.1-os.pdf   MQTT 文档 http://mqtt.org/new/wp-c ...

  8. 26个高效工作的小技巧 z

    1.时间常有,时间优先. 2.时间总会有的:每天只计划4-5 小时真正的工作. 3.当你在状态时,就多干点:不然就好好休息:有时候会连着几天不是工作状态,有时在工作状态时却又能天天忙活 12 小时,这 ...

  9. weblogic运维时经常遇到的问题和常用的配置

      希望这篇能把weblogic运维时经常遇到的问题.常用的配置汇总到一起. 1.配置jvm参数: 一般在domain启动过程中会看到以下启动的日志信息,如下图所示: 图中红色方框部分为启动weblo ...

  10. 如何查看pip安装包的所有版本；以及ipython的安装

    安装ipython很简单,直接使用pip就行 比如mac环境下:pip install ipython:提示安装失败,原因是pip默认安装的ipython版本6.0+不适用python3.3以下版本 ...