事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。

不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。

语法：e.stopPropagation();

参数e：表示事件传递的参数，代表事件的状态。

  1. <html>
  2. <head>
  3. <title>冒泡测试</title>
  4. </head>
  5. <body onclick="alert('body');">
  6. <div onclick="clickBtn(event)"  style="width:100px;height:100px; background:#666;">
  7. <input id="Button1" type="button" value="button" onclick="alert('btn');" />
  8. </div>
  9. <script language="javascript" type="text/javascript">
  10. function clickBtn(event)
  11. {
  12. event=event?event:window.event;
  13. event.stopPropagation();
  14. alert("OK");
  15. }
  16. </script>
  17. </body>
  18. </html>

事件冒泡之cancelBubble和stoppropagation的区别的更多相关文章

  1. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  2. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  3. DOM事件机制(事件捕获和事件冒泡和事件委托)

    内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...

  4. js事件冒泡、阻止事件冒泡以及阻止默认行为

    事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...

  5. jQuery中的事件冒泡

    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...

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

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

  7. JavaScript--阻止事件冒泡stopPropagation和cancelBubble

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> ...

  8. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  9. JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

随机推荐

  1. 51nod1674：区间的价值2（分治，利用&和|的收敛性）

    lyk拥有一个区间. 它规定一个区间的价值为这个区间中所有数and起来的值与这个区间所有数or起来的值的乘积. 例如3个数2,3,6.它们and起来的值为2,or起来的值为7,这个区间对答案的贡献为2 ...

  2. 【CQ18高一暑假前挑战赛2】标程

    [昨晚打校赛,5个小时打完很累了,所以搞忘出题了...对不起学弟们,不过出的题都亲自写过一遍,可以保证题目和代码长度都不长,题目难度不大] [A:bush博弈] #include<bits/st ...

  3. [ZJOI 2010] 排列计数

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2111 [算法] 一种比较好的理解方式是将该序列看成是一棵堆式存储的二叉树 那么问题转 ...

  4. PYTHON 异常处理 二 TRY 模块

    异常处理 捕捉异常可以使用try/except语句. try/except语句用来检测try语句块中的错误,从而让except语句捕获异常信息并处理. 如果你不想在异常发生时结束你的程序,只需在try ...

  5. PYTHON 异常处理 一 ASSERT

    assert语句,如果没记错,这个东西在C或者C++里面也有的.属于短小的断言.下面的是来自python help document的说明: Assert statements are a conve ...

  6. Linux设备驱动之Kobject、Kset

    作者:lizuobin(也是我们兼职的论坛答疑助手) 原文: https://blog.csdn.net/lizuobin2/article/details/51523693 纠结又纠结,虽然看了一些 ...

  7. jQuery.ajax各种参数及属性设置

      $.ajax({       type: "post",       url: url,       dataType:'html',       success: funct ...

  8. msq 表操作与其数据类型

    一:表介绍 表相当于文件, 表中的一条记录就相当于文件的一行内容, 不同的是,表中的一条记录有对应的标题,称为表的字段: id,name, age, sex,称为字段, 其余的一行内容称为一条记录. ...

  9. 2017-7-22 NOIP模拟赛

    Digits (digits.cpp/c/pas) Description给一个关于 的多项式,并给定一个 ,求该多项式在带入该 时的值最后 位数字.Input第一行两个整数 . :之后的 行,每行两 ...

  10. scrapy.Request使用meta传递数据，以及deepcopy的使用

    scrapy.Request(url[,callback,method="GET",headers,body,cookies,meta,dont_filter=False])   ...