事实上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. 51nod最长递增路径：（还不错的图）

    一个无向图,可能有自环,有重边,每条边有一个边权.你可以从任何点出发,任何点结束,可以经过同一个点任意次.但是不能经过同一条边2次,并且你走过的路必须满足所有边的权值严格单调递增,求最长能经过多少条边 ...

  2. 图片轮播和C3动画

    值得注意的地方是:如果在图片下面的li做背景图片,可以把li上的数字或者文本设置为transparent(透明色),这样的话既可以实现轮播的定时器效果,也可以让li上有C3动画效果.如果li上的文字不 ...

  3. linux下配置jdk+tomcat

    安装软件包 下载jdk和tomacat安装包,我这里使用的是jdk-8u144-linux-x64.tar.gz和apache-tomcat-8.5.23.tar.gz. 分别解压这两个安装包,用命令 ...

  4. bzoj 2962 序列操作——线段树（卷积？）

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2962 如果 _,_,_,…… 变成了 (_+k),(_+k),(_+k),…… ,计算就是在 ...

  5. 魔法少女-dp

    魔法少女 Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %I64d & %I64u 前些时间虚渊玄的巨献小圆着实火 ...

  6. In-App Purchase Programming Guide----（一) ---- About In-App Purchase

    About In-App Purchase In-App Purchase allows you to embed a store inside your app using the Store Ki ...

  7. 2.1-2.2 Hive 中数据库(Table、Database)基本操作

    官网文档:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+DDL 一.create table 1.官方字段 # # C ...

  8. UVa 10891 Game of Sum (DP)

    题意:给定一个长度为n的整数序列,两个人轮流从左端或者右端拿数,A先取,问最后A的得分-B的得分的结果. 析:dp[i][j] 表示序列 i~j 时先手得分的最大值,然后两种决策,要么从左端拿,要么从 ...

  9. HDU - 1016 Prime Ring Problem 经典素数环

    Prime Ring Problem A ring is compose of n circles as shown in diagram. Put natural number 1, 2, ..., ...

  10. 51nod1086(多重背包＆二進制)

    題目鏈接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1086 題意:中文題誒- 思路:很顯然這是一道多重背包題,不過這 ...