使用cancelBubble竟然可以阻止所有浏览器的冒泡?
以前一直以为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竟然可以阻止所有浏览器的冒泡?的更多相关文章
- js原生子级元素阻止父级元素冒泡事件
<html> <head> <style type="text/css"> #hide{ width:75%;height:80px;backg ...
- 阻止事件冒泡(stopPropagation和cancelBubble)和阻止默认行为(preventDefault和returnValue)
<div id="divId1" style="width:500px;height:500px;background-color:#3ac;text-align: ...
- 阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)
在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效 ...
- 阻止微信浏览器/QQ浏览器长按弹框“在浏览器打开”
这个弹框实际上等同于PC环境下的鼠标右键的弹框,因此只要禁止页面的弹框事件就能完美屏蔽该弹框对我们功能带来的影响.程序代码如下: document.oncontextmenu=function(e){ ...
- JavaScript 阻止默认时间和冒泡时间
<!DOCTYPE HTML><html> <head> <title>event cancel</title> </head> ...
- 理解阻止浏览器默认事件和事件冒泡cancelBubble
一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件 var addEvent = function( obj, type, ...
- 阻止JS事件冒泡传递(cancelBubble 、stopPropagation)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
随机推荐
- Python 日期和时间的几种输出格式
在python中,我们可以使用 time 模块的 strftime 方法来格式化日期,例子如下: import time # 格式化成2016-03-20 11:45:39形式 print (time ...
- Tomcat改端口号;修改访问路径,以及配置Context 标签以后Tomcat启动不了
修改tomcat端口号: <Connector port="8080" protocol="HTTP/1.1" connectionTimeout=&qu ...
- http编程(一)使用javaAPI实现
Java Http编程中常见的实现方式是使用Java 提供的API,另外就是使用Apache提供的 API 1.通过Java提供的API实现Http编程 类:URL:类 URL 代表一个统一资源定位符 ...
- Vue前端框架面试问题
1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答 ...
- URL编码分析与乱码解决方案
一.问题的由来 URL就是网址,只要上网,就一定会用到. 一般来说,URL只能使用英文字母.阿拉伯数字和某些标点符号,不能使用其他文字和符号.比如,世界上有英文字母的网址"http://ww ...
- kafka-2.11-0.11集群搭建
kafka集群依赖于zookeeper,所以需要先搭建zookeeper集群,kafka默认自带了内建的zookeeper,建议使用自己外搭建的zookeeper,这样比较灵活并且解耦服务,同时也可以 ...
- CUBA China 最新进展
各位关注CUBA平台的朋友,你们好! 距上次发布动态我们又沉默了大概两个月时间,这期间我们一直在翻译CUBA平台的文档.CUBA平台的开发文档相当丰富,所以这需要耗费较多的时间,至少比我们预想的时间要 ...
- 熟悉一下oncontextmenu事件的知识
定义和使用 只要点击鼠标右键,就触发oncontextmenu事件并打开上下文菜单. 需要注意的是:所有主流浏览器都支持oncontextmenu事件,但其中的contextmenu元素只有FireB ...
- Ionic国际化解决方案
1. 核心内容 使用Angular2的国际化(i18n)库:ngx-translate 官网地址:http://www.ngx-translate.com/ GitHub地址:https:// ...
- .net Core学习笔记之MemoryCache
.NET Core支持多种不同的缓存,其中包括MemoryCache,它表示存储在Web服务器内存中的缓存: 内存中的缓存存储任何对象; 分布式缓存界面仅限于byte[] 1:在.net co ...