事实上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. 并不对劲的bzoj5322:loj2543:p4561:[JXOI2018]排序问题

    题目大意 \(T\)(\(T\leq10^5\))组询问 每次给出\(n,m,l,r\),和\(n\)个数\(a_1,a_2,...,a_n\),要找出\(m\)个可重复的在区间\([l,r]\)的数 ...

  2. C# 获取QQ群数据的实现

    一,分析 1,群数据获取 当访问http://qun.qq.com/air/#mygroup我们通过Fiddler可以查看到QQ群列表是从http://qun.qq.com/air/group/min ...

  3. vuex本地存储

    vuex与localstorage 区别:vuex数据存储的内存,localstorage的数据存储在本地 应用场景:vuex用于组件之间的传值,localstorage用于不同页面之间的传值 永久性 ...

  4. <a href="#">什么意思

    转自:https://zhidao.baidu.com/question/67668291.html <a href="#">是链接到本页,因为你有的时候需要有个链接的 ...

  5. atof，atoi，atol，strtod，strtol，strtoul

    字符串处理函数 atof 将字串转换成浮点型数 atoi 字符串转换成整型数 atol 函数名: atol 功 能: 把字符串转换成长整型数 用 法: long atol(const char *np ...

  6. 联想Y450在Ubuntu下调节屏幕亮度

    今天觉得ubuntu下编程时屏幕太亮,上网查了下怎样设置屏幕亮度,按住Fn 的同时调节,结果木有反应啊,杯催.... 继续搜索,最终解决了, happy... 1. 设置屏幕亮度初始值,解决reboo ...

  7. 在调试javascript的时候，要常使用alert()

    在调试javascript的时候,要常使用alert()会帮助我们定位脚本错误.

  8. mysql使用小结

    一.修改 mysql 的 root 密码 mysql> use mysql;  mysql> update user set password=password('123456') whe ...

  9. web调试利器_fiddler

    此文已由作者夏君授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.fiddler简介 直接引用官网介绍 The free web debugging proxy for a ...

  10. 关于 T[] 的反射问题

    1. T[] 类型不适应以下代码 Dictionary<string, Test> d = new Dictionary<string, Test>(); // Get a T ...