首先看下JS的事件模型，JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根。

阻止冒泡：

1、stopPropagation()对于非IE浏览器。

2、cancelBubble属性为true，对于IE浏览器，而Jquery已经有兼容浏览器的方法，event.stopImmediatePropagation();

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <script type="text/javascript" src="js/jquery-1.4.4.min.js">

        </script>

        <title>

        </title>

    </head>

    <style type="text/css">

        body { background-color:#999999; } #myDiv { background-color:#FFFFFF;

        width:250px; height:250px; display:none; 　　　　　　} 　　

    </style>

    <body>

        <input id="btn" type="button" value="显示DIV" />

        <div id="myDiv">

            This is a div;

        </div>

    </body>

    <script type="text/javascript">

        　　　　

        var myDiv = $("#myDiv");

        $(function() {

            $("#btn").click(function(event) {

                showDiv(); //调用显示DIV方法

                $(document).one("click",

                function() { //对document绑定一个影藏Div方法

                    $(myDiv).hide();

                });

                event.stopPropagation(); //阻止事件向上冒泡

            });

            $(myDiv).click(function(event) {

                event.stopPropagation(); //阻止事件向上冒泡

            });

        });　　　　

        function showDiv() {

            $(myDiv).fadeIn();

        }

    </script>

js实现的点击div区域外隐藏div区域(转)的更多相关文章

  1. 点击区域外隐藏该区域，event.stopPropagation()

    event.stopPropagation() Description: Prevents the event from bubbling up the DOM tree, preventing an ...

  2. js实现的点击div区域外隐藏div区域

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.对 ...

  3. jQuery实现鼠标点击Div区域外隐藏Div

    冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络 ...

  4. js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

  5. JS 实现点击页面任意位置隐藏div、span

    通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...

  6. 怎么用js或jq点击展开，出现隐藏的DIV,点击收起DIV又隐藏起来.

    方法一:1 <script type="text/javascript"> $(function() { $("#toggle").click(fu ...

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

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

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

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

  9. FormSheet式模态视图，点击模态视图外隐藏模态视图的方法

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

随机推荐

  1. Linux学习之路—Linux文件与目录管理

    该内容来自鸟哥私房菜 1.目录的相关操作 1.1 特殊的目录 .  代表此层目录 .. 代表上一层目录 -  代表前一个工作目录 ~ 代表"目前用户身份"所在的主文件夹 ~acco ...

  2. 托管到github上的网页图片在百度浏览器中显示不全

    这几天做了个较完整的网页放到github上,上传后看网页效果. 在Firefox浏览器中,显示正常. 在百度浏览器中,空了一大块位置(图片位置),偏偏只空了这一块,其它地方的图片都好好的. 点击f12 ...

  3. PHP实现发红包程序

    我们先来分析下规律. 设定总金额为10元,有N个人随机领取: N=1 第一个 则红包金额=X元: N=2 第二个 为保证第二个红包可以正常发出,第一个红包金额=0.01至9.99之间的某个随机数. 第 ...

  4. MFC下OpenGL入门(可以用）

    MFC下OpenGL入门 源文件 1, 建一工程文件,我这里命名为first,现在first工程里面我们没有添加任何东西,所有的东西都是MFC自动帮我们创建的. 2, 添加链接库.这一步很关键.打开菜 ...

  5. cookie单点登录（跨域访问）

    新近一家公司上来就让做oa,要求嵌入公司现有系统模块,自然而然想到模拟post单点登录对方系统新建单点登陆页面保存session,然现有系统都有用cookie保存用户信息,故保存本地cookie……测 ...

  6. Android学习

    http://www.jikexueyuan.com/path/android 一.概述: 03年10月建立android科技,05年8月被google收购,07年11月成立开放手持设备联盟(Open ...

  7. Eclipse

    001.自动注释  window--preferences--java--codeStyle--codeTemplate--comments //Types: /** *@author ${user} ...

  8. 2016HUAS_ACM暑假集训4C - 递推

    题目大意:给你一个高为n ,宽为m列的网格,计算出这个网格中有多少个矩形. 这里我们可以这样看: 对于行:假如是m单位长度,则长度为1的矩形有m个,长度为2的矩形有m-1个......长度为m的只有1 ...

  9. 如何在JAVA中实现一个固定最大size的hashMap

    如何在JAVA中实现一个固定最大size的hashMap 利用LinkedHashMap的removeEldestEntry方法,重载此方法使得这个map可以增长到最大size,之后每插入一条新的记录 ...

  10. Python第三方包的安装和管理

    要想安装第三方的包,首先安装setuptools. 然后再安装pip,这个是用来管理第三方包的. 1. 包管理器pip,安装第三方包,以Selenium为例,运行 pip install seleni ...