事实上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. Rsyslog 日志相关内容

    [root@server vusers_home]# rpm -ql rsyslog|more       ###.so结尾为模块,模块有分im为输入模块,om 为输出模块/etc/logrotate ...

  2. 用C++发邮件

    近段时间,实验室电脑的IP频繁地改变,搞得想用远程偷下懒都不行.这时想到的解决方法有:静态IP,动态域名,自己解决.静态IP虽然可以自己指定,但一关机后,与对方冲突就完了,作罢.免费的动态域名又要手机 ...

  3. E - Jolly Jumpers

    E - Jolly Jumpers Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit  ...

  4. 解决“System.Data.OracleClient需要Oracle客户端软件8.1.7或更高版本”

    问题描述:远程访问该数据库(客户端同样是Oracle11g)提示“System.Data.OracleClient需要Oracle客户端软件8.1.7或更高版本”. 解决的办法: 1.一定要关闭Win ...

  5. flex设置默认字体为微软雅黑

    必须使用英文名称 Microsoft YaHei 否则有些系统不识别

  6. 安装APK时SO库的选择策略

    此文已由作者尹彬彬授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 0X0 前言 在Android系统中,当我们安装apk文件的时候,lib目录下的so文件会被解压到app的原 ...

  7. 51nod1093(推公式＆找規律)

    題目鏈接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1093 題意:中文題誒- 思路:xjb 一開始死活想不出怎麼將一 ...

  8. HTTPS为什么更安全，请看这里

    本文转载于https://foofish.net/https-story-1.html HTTPS 是建立在密码学基础之上的一种安全通信协议,严格来说是基于 HTTP 协议和 SSL/TLS 的组合. ...

  9. hyperledger fabric 1.0.5 分布式部署 （六）

    如何在相同的peer 节点上创建多个 channel 作者在hyperledger fabric 1.0.5 分布式部署 (五)已经向读者们介绍了一个简单的fabric 的部署流程,那么根据上一篇博客 ...

  10. Mybatis思

    站在巨人的肩膀上,感谢! mybatis源码分析之Mapper代理实现分析 2017年11月21日 23:39:04 huangshanchun 阅读数:277    版权声明:欢迎转载,如有不足之处 ...