首先看下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. (原创)基于CloudStack的平安云-云主机的生命周期

    一.购买云主机1.条件筛选   涉及环境.应用系统.区域.网络.操作系统.套餐.期限.数量筛选2.校验   2.1 应用系统角色权限校验   2.2 应用系统可用配置校验   2.3 产品区域是否下架 ...

  2. supervisord 小记

    此篇仅用作supervisord的用法,不涉及理论说明和基础介绍 supervisor(一)基础篇 使用supervisord来管理process 进程的守护神 - Supervisor superv ...

  3. Javaweb学习随笔_JSP的九大内置对象

    JSP内置对象整理 1. 九大内置对象: out,request,response,session,application,page,pageContext,config,Exception. 1.1 ...

  4. HDFS的运行原理

    简介 HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.是根据google发表的论文翻版的.论文为GFS(Google File System)Go ...

  5. solr+mongo-connector+mongdb+tomcat集成

    话题:solr安装 一.下载solr 本例采用4.10.3版本. Solr所有版本下载地址:http://archive.apache.org/dist/lucene/solr/ 下载完成后,解压的目 ...

  6. Recylerview的使用系列教程

    转发自:http://edu.csdn.net/course/detail/2877

  7. URL Scheme APP跳转safari以及跳回APP

    上图 : 在plist文件里面设置. URL identifier 一般为反域名+项目名称 (尽可能保证少重复) URL Schemes是一个数组.一个APP可以添加多个.该参数为跳转时使用的标识. ...

  8. glusterfs 中的字典查询

    glusterfs文件系统是一个分布式的文件系统,但是与很多分布式文件系统不一样,它没有元数服务器,听说swift上也是应用了这个技术的.glusterfs中每个xlator的配置信息都是用dict进 ...

  9. javascript 正在加载中，请稍后效果实现

    /*蒙版*/ .loading-mask { width: 100%; height: 100%; position: fixed; top:; left:; right:; bottom:; bac ...

  10. linux显示器常见设置

    1. 设置系统默认的分辨率 xrandr  命令: > xrandr Screen 0: minimum 1 x 1, current 1920 x 1080, maximum 8192 x 8 ...