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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         .wraper {
  16.             width: 400px;
  17.             height: 400px;
  18.             border: 1px solid #000;
  19.             margin: 0 auto;
  20.             position: relative;
  21.         }
  22.  
  23.         .menu_zone {
  24.             width: 50%;
  25.             height: 50px;
  26.             background: #aaa;
  27.         }
  28.  
  29.         .model_zone {
  30.             position: absolute;
  31.             width: 50%;
  32.             height: 200px;
  33.             background: #cac;
  34.             display: none;
  35.         }
  36.     </style>
  37. </head>
  38.  
  39. <body>
  40.     <div class="wraper">
  41.         <div id="menu" class="menu_zone">点击我显示菜单</div>
  42.         <div id="model" class="model_zone">我是菜单</div>
  43.     </div>
  44.     <script>
  45.         function $(id) {
  46.             return document.getElementById(id)
  47.         }
  48.         var oMenu = $("menu"),
  49.             oModel = $("model");
  50.         document.onclick = function () {
  51.             oModel.style.display = "none";
  52.         }
  53.  
  54.         // 方法一：使用dom0方式
  55.         // oMenu.onclick = function(e){
  56.         //     stopFunc(e);
  57.         //     oModel.style.display = "block";
  58.         // }
  59.         // oModel.onclick = function(e){
  60.         //     stopFunc(e);
  61.         // }
  62.  
  63.         //方法二：使用dom2方式
  64.         oMenu.addEventListener('click', function (e) {
  65.             stopFunc(e);
  66.             oModel.style.display = "block";
  67.         }, false)
  68.         oModel.addEventListener('click', function (e) {
  69.             stopFunc(e);
  70.         }, false)
  71.  
  72.         //阻止事件向上传递
  73.         function stopFunc(e) {
  74.             e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
  75.         }
  76.     </script>
  77. </body>
  78.  
  79. </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. linux rpm命令安装卸载 初步使用

    安装(以安装jdk为例) 1.下载后,首先把jdk-7u3-linux-x64.rpm复制到/usr/local/src#cp jdk-7u3-linux-x64.rpm /usr/local/src ...

  2. 异步请求（ajax，http） 之 逐渐完善的大全

    异步请求在我们的开发之中是经常需要学习和理解的内容,我们将会在这一篇文章中依据不同的语言和环境内容进行归类讲解. JS: ajax是我们最为常用的页面异步请求,在只需要修改部分页面内容而不需要更换全部 ...

  3. 什么是Activity，详细介绍Activity

    首先,Activity是Android系统中的四大组件之一,可以用于显示View.Activity是一个与用记交互的系统模块,几乎所有的Activity都是和用户进行交互的,但是如果这样就能说Acti ...

  4. HTTPPost/AFNetWorking/JSONModel/NSPredicate

    一.HTTPPost================================================ 1. POST方式发送请求 HTTP协议下默认数据发送请求方法是GET方式,若需要 ...

  5. 【爬虫】beautiful soup笔记（待填坑）

    Beautiful Soup是一个第三方的网页解析的模块.其遵循的接口为Document Tree,将网页解析成为一个树形结构. 其使用步骤如下: 1.创建对象:根据网页的文档字符串 2.搜索节点:名 ...

  6. 对结合BDD进行DDD开发的一点思考和整理

    引言 二十年前的我,还在学校里抱着一台DIY机(德州486+大众主板+16M内存+3.5inch软驱+昆腾320M硬盘,当时全校最快主机没有之一),揣着一本<Undocumented DOS&g ...

  7. git clone all branch and create a empty branch

    /******************************************************************** * git clone all branch and cre ...

  8. 使用Volley框架中的ImageLoader来异步的加载图片

    Volley框架在请求网络图片方面也做了很多工作,提供了好几种方法.本文介绍使用ImageLoader来进行网络图片的加载.ImageLoader的内部使用ImageRequest来实现,它的构造器可 ...

  9. minio  nginx 配置

    1. 参考配置  server { listen 80; server_name example.com; location / { proxy_set_header Host $http_host; ...

  10. Android开发SQLite数据库的创建

    package com.example.db; import android.content.Context; import android.database.sqlite.SQLiteDatabas ...