事实上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. [LeetCode] Shortest Distance from All Buildings Solution

    之前听朋友说LeetCode出了一道新题,但是一直在TLE,我就找时间做了一下.这题是一个比较典型的BFS的题目,自己匆忙写了一个答案,没有考虑优化的问题,应该是有更好的解法的. 原题如下: You ...

  2. [POI 2000] 病毒

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2938 [算法] 首先建出给定字符串集的AC自动机 存在无限长的代码当且仅当 : AC ...

  3. maven的常用构建命令

    mvn clean:删除项目根目录中的target目录

  4. 合并多个cv::Mat类型,即合并多个图片的接口

    1. cv::Mat get_merage_image(cv::Mat cur_frame) { cv::Mat image_one=cur_frame; cv::Mat image_two=cur_ ...

  5. Ubuntu下使用gcc编译c文件,未识别cos,sin

    Ubuntu下使用gcc编译c文件,虽然我调用了math.h的头文件,但是未识别cos,sin 报错:( fft.c ) /tmp/ccwXjD8C.o: In function `fft': fft ...

  6. $bzoj4569$

    $st表+并查集$ $考虑暴力方法:我们每次将对应相等的位置用并查集连起来,那么最终答案就是9*10^{连通块个数-1}$ $很明显上面这个办法过不去,问题在于重复次数太多了,如果一个区间已经对应相等 ...

  7. hdu5530

    分治ntt 考虑从添加i,放在j位置,那么1->j是一个连通块,j+1->i和1->j不连通,那么我们可以列出式子dp[i]=∑j=1->i dp[i-j]*A(i-1,j-1 ...

  8. C++学习笔记1-使用数组进行vector初始化

    另外,如果是定义的时候,可以直接指定复制.比如:int s[5]={1,2,3,4,5};vector<int> v(s,s+5);就可以啦.

  9. 【HBase】HBase笔记:HBase的Region机制

    HBase 的机制里包含了许多优秀的算法,如 Region 定位.Region 分配.Region Server的上线和下线.Master 的上线和下线.在谈到这些之前,先把 HBase 的基本架构里 ...

  10. Mac和Unix的常用命令行指令

    更新:2017/05/03/02:05 更新: 2017/05/14/11:14 更新: 2017/09/05/16:15 增加rm -rf 强制删除文件夹内所有文件 更新: 2018/01/16 完 ...