以前一直以为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. 如何在window server IIS上部署可以使用web deploy?

    环境: windows server2012 方式1: 1,下载"wpilauncher.exe" Web平台安装程序.下载地址:http://www.microsoft.com/ ...

  2. C++的开源跨平台日志库glog学习研究(三)--杂项

    在前面对glog分别做了两次学习,请看C++的开源跨平台日志库glog学习研究(一).C++的开源跨平台日志库glog学习研究(二)--宏的使用,这篇再做个扫尾工作,算是基本完成了. 编译期断言 动态 ...

  3. C++的开源跨平台日志库glog学习研究(二)--宏的使用

    上一篇从整个工程上简单分析了glog,请看C++的开源跨平台日志库glog学习研究(一),这一篇对glog的实现代码入手,比如在其源码中以宏的使用最为广泛,接下来就先对各种宏的使用做一简单分析. 1. ...

  4. CS231n学习笔记-图像分类笔记(下篇)

    原文地址:智能单元 K-Nearest Neighbor分类器 大家可能注意到了,为什么只用最相似的一张图片的标签来作为测试图像的标签呢?这不是很奇怪吗!是的,使用K-Nearest Neighbor ...

  5. 再学Java 之 private、protected、public和default的作用域

    前言:如果提到protected的访问控制级别,您的第一反应是”只能是子类才可以访问“,那么您很可能需要往下看. 首先,大致介绍一下各个访问控制符的访问控制级别(具体的介绍很多大牛的博文都有介绍,我就 ...

  6. Spring Security构建Rest服务-0102-Spring Social开发第三方登录之qq登录

    图一 基于SpringSocial实现qq登录,要走一个OAuth流程,拿到服务提供商qq返回的用户信息. 由上篇介绍的可知,用户信息被封装在了Connection里,所以最终要拿到Connectio ...

  7. LDA Gibbs Smapling理解

    即排除当前词的主题分配,根据其他词的主题分配和观察到的单词来计算当前词主题的概率公式 里面用到了伽马函数的性质 当Gibbs sampling 收敛后,我们需要根据最后文档集中所有单词的主题分配来计算 ...

  8. .Net Core全球化多语言

    参照:ASP.NET Core 全球化和本地化 步骤如下: 后台中的本地化. Startup.cs中注册服务并制定Resource文件的位置.注意:这里的位置不仅仅应用到Web层,如Infrastru ...

  9. 国际化实现之安装脚手架vue以及打包问题

    做这个项目用的是vue+element UI来实现的响应式布局,现主要说一下国际化这块的实现. 第一步:新建文件夹i18n 第二步:配置cn.js.en.js等文件内容 cn.js import en ...

  10. for-in循环

    //for in循环遍历var objs={"username":"hh","age":"20","sex&q ...