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

阻止冒泡：1、对于非IE浏览器：stopPropagation()。2、对于IE浏览器：cancelBubble属性为true

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .wraper {

            width: 400px;

            height: 400px;

            border: 1px solid #000;

            margin: 0 auto;

            position: relative;

        }

        .menu_zone {

            width: 50%;

            height: 50px;

            background: #aaa;

        }

        .model_zone {

            position: absolute;

            width: 50%;

            height: 200px;

            background: #cac;

            display: none;

        }

    </style>

</head>

<body>

    <div class="wraper">

        <div id="menu" class="menu_zone">点击我显示菜单</div>

        <div id="model" class="model_zone">我是菜单</div>

    </div>

    <script>

        function $(id) {

            return document.getElementById(id)

        }

        var oMenu = $("menu"),

            oModel = $("model");

        document.onclick = function () {

            oModel.style.display = "none";

        }

        // 方法一：使用dom0方式

        // oMenu.onclick = function(e){

        //     stopFunc(e);

        //     oModel.style.display = "block";

        // }

        // oModel.onclick = function(e){

        //     stopFunc(e);

        // }

        //方法二：使用dom2方式

        oMenu.addEventListener('click', function (e) {

            stopFunc(e);

            oModel.style.display = "block";

        }, false)

        oModel.addEventListener('click', function (e) {

            stopFunc(e);

        }, false)

        //阻止事件向上传递

        function stopFunc(e) {

            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

        }

    </script>

</body>

</html>

效果如下：

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. 在Hive中使用Avro

    作者:过往记忆 | 新浪微博:左手牵右手TEL | 可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明博客地址:http://www.iteblog.com/文章标题:<在Hiv ...

  2. Node.js小白开路（一）-- console篇

    在所有内容的学习之中我们经常首先要接受到的常常很大一部分为命令行或是工具的内容展示,console内容为node.js在命令行中答应数据内容的一个途径. Console是nodejs中的元老级模块了. ...

  3. 【spark】IDEA建立基于scala语言的spark项目

    1.新建一个Spark项目 2.选择maven,用模板创建项目 如果 没有这个模板,我们需要添加一个 我们这里使用的是1.6版本Archetype Group Id : net.alchim31.ma ...

  4. MongoDB 可视化管理工具 MongoCola-1.1.0 测试版发布

    首先,感谢大家对于本工具的支持. 经过一周的努力,最新版的工具测试版出炉了,这个版本是一个很重要的版本. 为什么说这个版本重要?以前的工具,只支持一个视图窗口,也就是说了,一次只能看一个数据集的数据. ...

  5. 2017.11.17 Demo-stm8+temperature timeing control

    1Find the lab and add in project. Downtown  it from ST  official website..compile it to ensure it pa ...

  6. Kotlin 第一弹：自定义 ViewGroup 实现流式标签控件

    古人学问无遗力, 少壮工夫老始成.纸上得来终觉浅, 绝知此事要躬行. – 陆游 <冬夜读书示子聿> 上周 Google I/O 大会的召开,宣布了 Kotlin 语言正式成为了官方开发语言 ...

  7. HAWQ取代传统数仓实践（十三）——事实表技术之周期快照

    一.周期快照简介 周期快照事实表中的每行汇总了发生在某一标准周期,如一天.一周或一月的多个度量.其粒度是周期性的时间段,而不是单个事务.周期快照事实表通常包含许多数据的总计,因为任何与事实表时间范围一 ...

  8. OneDrive网页版打不开的解决办法

    发现OneDrive文件被误删了,想去网页版找回历史文件,发现网页版无法打开,而客户端是可以正常使用的,于是猜测是域名指向的主IP被封了,于是想通过客户端的IP访问 第一步,WireShark抓包 第 ...

  9. 伪元素:placeholder-shown&&:focus-within

    :placeholder-shown 另外,划重点,这个伪类是仍处于实验室的方案.也就是未纳入标准,当然我们的目的是探寻有意思的 CSS . 当 input 类型标签使用了 placeholder 属 ...

  10. GCC参数使用

    gcc and g++分别是gnu的c & c++编译器 gcc/g++在执行编译工作的时候,总共需要4步 1.预处理,生成.i的文件[预处理器cpp] 2.将预处理后的文件不转换成汇编语言, ...