如果子元素和父元素都有点击事件，会出现点击事件冒泡的情况。

1.如何避免冒泡：

html：

<html>

 <head></head>

 <body>

  <div class="title login" style="color: #fff;font-size: 14px" id="personalInfo">

   你好,

   <span style="color:#fff;font-size: 14px " id="login_name_span">战无不胜</span>

   <span style="color:#fff;font-size: 14px;margin-left: 4px " id="UserLogout">[注销]</span>

  </div>

 </body>

</html>

js

方法1：

    UserLogout.onclick=function (e) {

        e.stopPropagation();//阻止事件冒泡即可 
        //e.cancelBubble=true;//非标准的IE方式:;  这里的cancelBubble是 IE事件对象的属性，设为true就可以了


    }

方法2：

    UserLogout.onclick=function (e) {

      //事件处理代码

      //实际上是终结了这个（点击）事件，冒泡当然也就停止了。

       return false;

    }

2.关于事件冒泡

事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）

<html>

 <head></head>

 <body>

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

  var div2 = document.getElementById("div2");

  div2.onclick = function(){alert(1);};

  div1.onclick = function(){alert(2);};//父亲

   //html代码

   <div id="div1">

    <div id="div2">

    </div>

  </div>

 </body>

</html>

当我们在div2里面点击的时候，会发现弹出了一次1，接着又弹出了2，这说明点击的时候，不仅div2的事件被触发了，它的父级的点击事件也触发了，这种现象就叫做冒泡。

冒泡还有一大优点，就是事件委托，而且经常用到，还能提高很大的性能，详情见：https://www.cnblogs.com/vickylinj/p/10940067.html

html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡的更多相关文章

  1. 如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

  2. 【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

    由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...

  3. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  4. 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

    前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...

  5. 解决：子元素设置margin-top，父元素也受影响的问题

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...

  6. 关于元素设置margin-top能够改变body位置的原因及解决（子元素设置margin-top改变父元素定位）

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  7. HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  8. 用jQuery.delegate()将事件绑定在父元素上面

    1.先看看官方的示例: <html> <head> <script type="text/javascript" src="/jquery/ ...

  9. 子组件通过 $emit 触发父组件的自定义事件

    子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData} ...

随机推荐

  1. PHP try catch 如何使用

      <?php   try { if (file_exists('test_try_catch.php')) { require ('test_try_catch.php'); } else { ...

  2. (三)OpenCV-Python学习—图像平滑

    由于种种原因,图像中难免会存在噪声,需要对其去除.噪声可以理解为灰度值的随机变化,即拍照过程中引入的一些不想要的像素点.噪声可分为椒盐噪声,高斯噪声,加性噪声和乘性噪声等,参见:https://zhu ...

  3. 知乎千万级高性能长连接网关 https://zhuanlan.zhihu.com/p/66807833

    知乎千万级高性能长连接网关揭秘 9 天前 · 来自专栏 知乎技术专栏 实时的响应总是让人兴奋的,就如你在微信里看到对方正在输入,如你在王者峡谷里一呼百应,如你们在直播弹幕里不约而同的 666,它们的背 ...

  4. mac安装 bcolz出现错误

    使用的是命令pip install bcolz c-blosc//snappy-stubs-:: fatal error: 'algorithm' file not found #include &l ...

  5. Redis Sentinel 高可用服务架构搭建

    https://www.cnblogs.com/xishuai/p/redis-sentinel.html

  6. GPS nmealib学习 问题

    When building on Ubuntu 12.x the build fails with the following error… gcc  samples/generate/main.o ...

  7. 001-poi-excel-基础、单元格使用操作

    一.概述 Apache POI是Apache软件基金会的开源项目,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. .NET的开发人员则可以利用NPOI (POI ...

  8. Qt编写自定义控件38-高亮按钮

    一.前言 高亮按钮控件,既可以作为类似于交通指示灯使用,也可以作为设备状态指示灯使用,控件内置多套颜色风格,还可以自己设置颜色风格,按钮可以增加文字显示,非常适合需要在状态设备上显示小量的文字展示,按 ...

  9. mysql 1577、1548错误 解决方案

    mysql 1577.1548错误 解决方案 1.mysql版本: 5.5.12 2.问题原因: 使用Navicat导出数据库的提示 :1577 – Cannot proceed because sy ...

  10. 处理线上CPU负载过高的故障现象

    如何处理线上CPU100%的故障现象 处理流程: 1.登陆线上机器top命令,查看耗费cpu的进程号,举例来说发现进程24008持续耗费资源 2.top -Hp 24008去查看持续耗费cpu的线程号 ...