首先看下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. Python 基礎 - 文件的操作

    在來我們來玩一下文件操作,這個在未來工作上,也是會很常用到的功能 Python2.7中,可以用file()來打開文件,而在Python3中,一律都是用open(),接下來在當前目錄下,先建立一個空文件 ...

  2. Python 基礎 - 字符串常用操作

    字符串常用操作 今天就介紹一下常用的字符串操作,都是以 Python3撰寫的 首字母變大寫 #!/usr/bin/env python3 # -*- coding:utf-8 -*- name = & ...

  3. Eclipse vs. IDEA快捷键对比大全

    原文链接: http://blog.csdn.net/dc_726 花了一天时间熟悉IDEA的各种操作,将各种快捷键都试了一下,感觉很是不错!于是就整理了一下我经常用的一些Eclipse快捷键与IDE ...

  4. java验证码前台技术

    //下面是在前台jsp页面不用导工具的情况下制作的验证码的基本代码 $(function(){ //创建验证码 createCode(); jQuery.validator.addMethod( &q ...

  5. Python 打印99乘法口诀表

    import string for x in xrange(1,10): for y in xrange(1,x+1): print string.ljust("%d*%d = " ...

  6. IIs安装&发布&解决遇到的问题

    IIS安装: IIS发布: 1.添加网站: 2.将发布的文件,copy到该网站的目录下 3. 刷新,文件显示出来,将其"转换为应用程序” => 4.在应用程序池中找到该网站相应的程序池 ...

  7. Hello Docker (Docker 入门分享)

    Hello Docker 1 PPT @ http://download.csdn.net/download/liangread/9431056 TBD

  8. python字符串基本操作

  9. [原创]cocos2d-x研习录-第三阶 特性之动作

    在前面的Cocos2D-x的概念类中,我们了解到节点类CCNode.导演类CCDirector.场景类CCScene.布景层类CCLayer和精灵类CCSprite等,这些类都是构成游戏画面的基本元素 ...

  10. Python>>>The Very First Step

    Windows官网下载 python-2.7.13.amd64.msi 默认会安装pip,同是把设置环境变量也选中 安装第三方包: pip install pygame 确认已经正确安装的方法:1.完 ...