首先看下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. 【JavaScript忍者秘籍】定时器

  2. S2SH+mysql-软件开发实际部署问题-8个小时后提示MYSQL数据库无法连接

    type Exception report message description The server encountered an internal error () that prevented ...

  3. MATLAB中fft函数的正确使用方法

    问题来源:在阅读莱昂斯的<数字信号处理>第三章离散傅里叶变换时,试图验证实数偶对称信号的傅里叶变换实部为偶对称的且虚部为零.验证失败.验证信号为矩形信号,结果显示虚部是不为零且最大幅值等于 ...

  4. FMS 4中multicast脚本的小修正

    FMS 4中multicast脚本的小修正 http://help.adobe.com/en_US/flashmediaserver/devguide/WS7812b00092aae0dc-2829d ...

  5. 因特网服务的类型（协议），目前最流行的类型是 http协议

    在学习超链接中,在HTML上点击QQ图标时会 自动的启动自己本地QQ客户端,其方法是使用了超链协议 一些常用协议如下: file资源是本地计算机上的文件.格式file:/// ftp通过 FTP访问资 ...

  6. thinkphp基于角色的权限控制详解

    一.什么是RBAC 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注. 在RBAC中,权限与角色相关联,用户通 ...

  7. 启动OracleDBConsoleorcl失败，提示错误代码2

    异常问题: 启动OracleDBConsoleorcl失败,提示错误代码2 原因分析: 由于更改计算机名导致的异常 解决方法: 1.管理员权限cmd下执行emctl start dbconsole 2 ...

  8. 如何导出和导入mysql数据(数据迁移)

    . 导出数据库数据 mysqldump -uroot -p dp_db > dumpout.sql 其中 root是账户名 dp_db是需要导出的数据库名称 dumpout.sql存储导出的数据 ...

  9. 好的bootstrap文章

    http://www.cnblogs.com/gamehiboy/p/5176618.html http://www.cnblogs.com/landeanfen/p/5821192.html htt ...

  10. golang开发环境(2016.9.16)

    一.windows下安装 1.下载go1.7.3.windows-amd64.msi,建议默认安装到‘C:\Go\’ 2.环境变量 变量 值 说明 Path C:\Go\bin 安装程序默认会设置,如 ...