要求：点击按钮时，下拉框显示；点击页面其他部分时，下拉框消失；

1. 不靠谱代码

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style>
  7.          #div1 {
  8.              width: 400px;
  9.              height: 300px;
  10.              background-color: #ccc;
  11.              display: none;
  12.          }
  13.      </style>
  14.      <script>
  15.          window.onload = function () {
  16.              var oBtn = document.getElementById("btn1");
  17.              var oDiv = document.getElementById("div1");
  18.  
  19.              oBtn.onclick = function () {
  20.                  oDiv.style.display = "block";
  21.              };
  22.              document.onclick = function () {
  23.                  oDiv.style.display = "none";
  24.              };
  25.          }
  26.      </script>
  27.  </head>
  28.  <body>
  29.      <input id="btn1" type="button" value="show" />
  30.      <div id="div1"></div>
  31.  </body>
  32.  </html>

不靠谱原因：当点击按钮时，（1）点击事件在btn上触发并执行，此时下拉框显示；（2）事件一直向上冒泡，并遇到了定义在document上的点击事件，触发并执行，此时下拉框不显示；

2. 解决方案 --- 组织事件冒泡（event.cancelBubble = true）

  1.  oBtn.onclick = function (event) {
  2.         oDiv.style.display = "block";
  3.         event.cancelBubble = true;
  4.  };

事件冒泡 --- 仿select下拉框的更多相关文章

  1. 仿select下拉框

    默认状态下,灰色面板出现.当点击页面按钮以及灰色面板外区域时,面板消失;点击按钮,灰色面板出现;点击灰色面板区域,面板不能消失. 主要考察:事件冒泡与取消事件冒泡. 代码: <!DOCTYPE ...

  2. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  3. LayUI中select下拉框选中触发事件

    代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...

  4. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  5. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  6. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  7. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  8. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  9. jquery操作select下拉框的多种方法(选中,取值,赋值等)

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

随机推荐

  1. netty-3.客户端与服务端通信

    (原) 第三篇,客户端与服务端通信 以下例子逻辑: 如果客户端连上服务端,服务端控制台就显示,XXX个客户端地址连接上线. 第一个客户端连接成功后,客户端控制台不显示信息,再有其它客户端再连接上线,则 ...

  2. C# class 浅拷贝 与 深拷贝

    MemberwiseClone 方法创建一个浅表副本,具体来说就是创建一个新对象,然后将当前对象的非静态字段复制到该新对象.如果字段是值类型的,则对该字段执行逐位复制.如果字段是引用类型,则复制引用但 ...

  3. Eclipse 的 CheckStyle 插件

    Eclipse 的 CheckStyle 插件 1.简介 Checkstyle 是 SourceForge 下的一个开源项目,提供了一个帮助 JAVA 开发人员遵守某些编码规范的工具.它能进行自动化代 ...

  4. Python GUI编程(Tkinter)Ⅱ

    Tkinter 组件 Tkinter的提供各种控件,如按钮,标签和文本框,一个GUI应用程序中使用.这些控件通常被称为控件或者部件. 目前有15种Tkinter的部件.我们提出这些部件以及一个简短的介 ...

  5. BFC的理解

    一.BFC概念 BFC即Block Formatting Contexts(块级格式化上下文),它属于普通流.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其他子元素将如何定位,以及和其他元素 ...

  6. 【Python之路】特别篇--Django生产环境部署

    Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. uWSGI uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中H ...

  7. psd缩略图上传控件

    前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践. ...

  8. asp.net上传超大文件解决方案

    ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...

  9. 交换机配置——STP实验（指定特定交换机为根桥）

    一.实验目的:将三层交换机Switch3设置为根桥交换机 二.拓扑图如下: 三.具体步骤 先说明一下,四个交换机形成环路,为解决环路问题交换机会自动进行选举,选举出一个根源,根桥交换机会决定一个最佳路 ...

  10. hdu 5733 tetrahedron 四面体内切球球心公式

    tetrahedron Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...