冒泡的概念就是  当子元素触发事件的时候  相应的祖宗十八代素也会触发相同的事件
(前提父元素也添加了一样的事件)
eg:儿子 有一个onclick  祖宗十八代 也有onclick
   当点击儿子的时候  祖宗十八代的点击事件也会被触发
   有时候这种情况会导致很多问题  所以要阻止冒泡
   只有被点击的元素才触发事件
   不是所有的事件都会冒泡
   onblur onfocus  onload  onerror 没有

  其实事件的触发一共有三个过程 ： 捕获阶段--->处于目标阶段---->冒泡阶段

  标准浏览器冒泡顺序 子元素-->父辈-->body-->document--->window
  IE 子元素-->父辈-->body-->document

  接下来上代码  很容易  做一个兼容处理就好了
<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>阻止冒泡</title>

 </head>

 <body>

     <input type="button"  id="cancelBubble" value="取消冒泡"/>

    <script type="text/javascript">

          var btn=document.getElementById("cancelBubble");

          document.onclick=function(){

            alert("冒泡");

          }

          btn.onclick=function(event){

          var event=event||window.event;//兼容

          if(event && event.stopPropagation){

               event.stopPropagation();

          }

          else{

              //IE 678

             event.cancelBubble=true;

          }

           alert("没有冒泡");

          }

    </script>

 </body>

</html>

事件冒泡 比bubble的更多相关文章

  1. JS中的事件冒泡（Bubble）和事件捕获（capture）以及如何阻止事件的冒泡

    对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...

  2. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  3. JavaScript事件——冒泡、捕获

    本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...

  4. JS事件冒泡

    JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这 一过程被 ...

  5. js事件冒泡原理及处理

    事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”:执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动 ...

  6. 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  7. js事件冒泡和捕捉

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  8. js事件冒泡和事件捕获详解

    Javascript与HTML之间的交互是通过事件实现. 一.事件流 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间.事件流,描述的是页面中接受事件的顺序.IE9,chrome,Firefox,O ...

  9. 【JQuery】事件冒泡及使用jQuery阻止

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

随机推荐

  1. java使用DOM操作XML

    XML DOM简介 XML DOM 是用于获取.更改.添加或删除 XML 元素的标准. XML 文档中的每个成分都是一个节点. DOM 是这样规定的: 整个文档是一个文档节点 每个 XML 标签是一个 ...

  2. 浮动元素垂直居中，bootstrap栅格布局垂直居中

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. python 多线程删除MySQL表

    一.需求分析 在<python 统计MySQL表信息>这篇博客中,链接如下: https://www.cnblogs.com/xiao987334176/p/9901692.html 已经 ...

  4. Python装饰器讲解

    Python装饰器讲解 定义:本质是函数,就是为其他函数添加附加功能.原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 import time def timmer(func ...

  5. U盘删除文件时提示“文件或目录损坏且无法读取”的解决方法

    U盘删除文件时提示“文件或目录损坏且无法读取”的解决方法 出现原因:在写入或读取文件时,进行复制操作,此时复制到的文件是不完整的!或者移动硬盘/U盘中途被拔出,导致文件损坏 异常现象:被删文件(夹)属 ...

  6. CTF内存高级利用技术

    起了一个比较屌的标题,233.想写这篇文章主要是看了kelwya分析的议题,于是准备自己动手实践一下.蓝莲花的选手真的是国际大赛经验丰富,有很多很多的思路和知识我完全都没有听说过.这篇文章会写一些不常 ...

  7. RabbitMQ系列之RabbitMQ集群

    本文的集群是RabbitMq 自身的Cluster搭建 . #hosts准备: vim /etc/hosts #172.16.3.79 s1 #172.16.3.105 s2 172.16.2.10 ...

  8. 如何解决谷歌Chrome浏览器空白页的问题

    如何解决谷歌Chrome浏览器空白页的问题   谷歌Chrome浏览器突然不打开任何网页,无论是任何站点(如http://www.baidu.com), 还是Chrome浏览器的设置页面(chrome ...

  9. 用 Java 实现一个快速排序算法

           快速排序是排序算法中效率最高的一种,它是利用递归的原理,把数组无限制的分成两个部分,直到所有数据都排好序为止. 快速排序是对冒泡排序的一种改进.它的基本思想是通过一趟排序将要排序的数据分 ...

  10. 虚拟机之openVZ简单基础

    OpenVZ的是免费的开源软件,基于GNU GPL协议. OpenVZ的是基于Linux的容器虚拟化. OpenVZ在一台服务器上能够创建创建多个安全隔离的Linux容器(也称为虚拟环境或的VPS), ...