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

1. 不靠谱代码

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         #div1 {

             width: 400px;

             height: 300px;

             background-color: #ccc;

             display: none;

         }

     </style>

     <script>

         window.onload = function () {

             var oBtn = document.getElementById("btn1");

             var oDiv = document.getElementById("div1");

             oBtn.onclick = function () {

                 oDiv.style.display = "block";

             };

             document.onclick = function () {

                 oDiv.style.display = "none";

             };

         }

     </script>

 </head>

 <body>

     <input id="btn1" type="button" value="show" />

     <div id="div1"></div>

 </body>

 </html>

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

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

 oBtn.onclick = function (event) {

        oDiv.style.display = "block";

        event.cancelBubble = true;

 };

事件冒泡 --- 仿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. SAP 选择屏幕的上方 （sscrfields） 按钮设置

    TABLES sscrfields. PARAMETERS: p_carrid TYPE s_carr_id, p_cityfr TYPE s_from_cit. , "激活按钮 . INI ...

  2. unbutu apt-get update失败及解决办法

    今天在用apt-get update更新时一直失败,报的错误为”Failed to fetch 404 Not Found”,因为我的镜像改为了mirrors.aliyun.com 我试着ping了一 ...

  3. 第二天Beta冲刺

    这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 <做个一亿的小项目> 这个作业的目标 完成第二天Beta冲刺 作业正文 .. ...

  4. 小程序swiper组件的bindchange方法重复执行问题

    这是官方文档的说法给出了swiper组件一直来回滑动的bug原因 以下是修正方法 <swiper autoplay="{{autoplay}}" interval=" ...

  5. SSM框架中使用日志框架

    在 pom,xml 配置 Log4j jar 添加一个 mybatis_log.xml 文件 完整配置信息 <?xml version="1.0" encoding=&quo ...

  6. Ubuntu 保存文件时报E212

    命令输入: vim test/conf.conf 出现如下报错:  步骤一: 没有足够的权限!使用如下代码尝试: :w !sudo tee % > /dev/null 如果步骤一没有解决问题,尝 ...

  7. 28.Python list列表详解

    在实际开发中,经常需要将一些(不只一个)数据暂储起来,以便将来使用.说到这里,一些读者可能知道或听说过数组,它就可以把多个数据挨个存储到一起,通过数组下标可以访问数组中的各个元素.但使用数组存储数据有 ...

  8. Vue_(组件通讯)使用solt分发内容

    Vue特殊特性slot 传送门 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title</h1> </com-a> 如果想 ...

  9. nagios监控部署

    nagios监控部署. 在部署之前把依赖包安装了. [root@tiandong63 ~]# yum install -y gcc glibc glibc-common php gd gd-devel ...

  10. pyton3的数字操作你都会用吗？

    '''数字数据类型用于存储数值.数据类型是不允许改变的,这就意味着如果改变数字数据类型的值,将重新分配空间. 1.del(用于删除一些数字对象的引用) 2.整形(int)通常被称为是整形或者整数,是正 ...