以前一直以为cancelBubble是IE8及以下的专属,今天做一个测试的时候意外发现了所有浏览器都支持,便提出来希望有哪位解释下。

1.使用原生js在FF下和chrome下两种方法都可以阻止冒泡

document.getElementById("wq").addEventListener("click",function(e){
console.log('wq');
},false);
document.getElementById("we").addEventListener("click",function(e){
console.log(e);
// e.stopPropagation();
e.cancelBubble = true;
},false);

2.使用jquery两种方法也都可以阻止冒泡

<div id="wq">
<span id="we">click</span>
</div>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#wq").on("click",function(){
console.log("wq");
});
$("#we").on("click",function(e){
console.log(e);
// e.stopPropagation();
e.originalEvent.cancelBubble = true;
})
</script>

使用cancelBubble竟然可以阻止所有浏览器的冒泡?的更多相关文章

  1. js原生子级元素阻止父级元素冒泡事件

    <html> <head> <style type="text/css"> #hide{ width:75%;height:80px;backg ...

  2. 阻止事件冒泡(stopPropagation和cancelBubble)和阻止默认行为(preventDefault和returnValue)

    <div id="divId1" style="width:500px;height:500px;background-color:#3ac;text-align: ...

  3. 阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)

    在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效 ...

  4. 阻止微信浏览器/QQ浏览器长按弹框“在浏览器打开”

    这个弹框实际上等同于PC环境下的鼠标右键的弹框,因此只要禁止页面的弹框事件就能完美屏蔽该弹框对我们功能带来的影响.程序代码如下: document.oncontextmenu=function(e){ ...

  5. JavaScript 阻止默认时间和冒泡时间

    <!DOCTYPE HTML><html> <head> <title>event cancel</title> </head> ...

  6. 理解阻止浏览器默认事件和事件冒泡cancelBubble

    一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...

  7. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  8. js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

    转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件   var addEvent = function( obj, type, ...

  9. 阻止JS事件冒泡传递(cancelBubble 、stopPropagation)

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

随机推荐

  1. (转)Python3.5——装饰器及应用详解

    原文:https://blog.csdn.net/loveliuzz/article/details/77853346 Python3.5——装饰器及应用详解(下)----https://blog.c ...

  2. java数据结构之三叉链表示的二叉树

    三叉链表示的二叉树定义所畏的三叉链表示是指二叉树由指向左孩子结点.右孩子结点.父亲结点[三叉]的引用(指针)数据和数据组成.    package datastructure.tree.btree; ...

  3. node服务端搭建学习笔记

    咳咳,终于迈出这一步了...这篇文章将是边学边写的真正笔记...用于mark下学习过程中的点滴~ 开篇先把我学习参考的文章来源给出,以表示对前人的尊敬: https://github.com/nswb ...

  4. ibatis Dynamic总结(ibatis使用安全的拼接语句,动态查询)

    ibatis中使用安全的拼接语句,动态查询,ibatis比JDBC的优势之一,安全高效 说明文字在注释中 一.引入 一个小例子  <select id="selectAllProduc ...

  5. 远程通信机制RPC与RMI的关系

     1.RPC RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC不依赖于具体的网 ...

  6. 【JavaScript 从零开始】 原始值和对象引用、类型转换

    JavaScript 中的原始值(undefined.null . 布尔值.数值和字符串)于对象(包括数组和函数)有着根本区别. 原始值是不可更改的:任何方法都无法改变(或“突变”)一个原始值. 对于 ...

  7. SpringBoot(一)初遇

    环境: IDEA 2018.1.3 , jdk 1.8 , maven 3.3.9 零 第一次接触springboot, 如何学习比较困惑, 思前想后最后决定从文档来学习, 以下为学习中的参考资料: ...

  8. java的文件操作(1)

    package com.test.file; import java.io.*; import java.util.ArrayList; import java.util.Date; import j ...

  9. spring 中 InitializingBean 接口使用理解

    前言:这两天在看 spring 与 quart 的集成,所以了解到 spring 是如何初始化 org.springframework.scheduling.quartz.SchedulerFacto ...

  10. 性能是.NET Core的一个关键特性

    关键要点1).NET Core是跨平台的,可运行在Windows.Linux.Mac OS X和更多平台上:与.NET相比,发布周期要短得多.大多数.NET Core都是通过NuGet软件包交付的,可 ...