使用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. ...
随机推荐
- css 设置滚动条的样式
/*移动端显示滚动条*/ .layui-table-body::-webkit-scrollbar { -webkit-appearance: none; } .layui-table-body::- ...
- 运维甩锅神器---Jumpserver
简介jumpserver 也就是跳板机,堡垒机,主要用于免密钥登陆web终端,可以对所有操作进行记录,录像!对所有服务器进行资产管理, 给开发人员分配登陆主机的权限和sudo权限,为运维人员省了很多手 ...
- tomcat启动(一)startup.bat|catalina.bat分析
环境:windows X64位 Tomcat8.0.47 bootstrap.jar是tomcat的内核 开始位置 startup.bat 查看文本 具体的批处理脚本语法可以查看我整理的文章 http ...
- sockets+proxychains代理,使内网服务器可以访问外网
Socks5+proxychains做正向代理 1. 应用场景: 有一台能上外网的机子,内网机子都不能连外网,需求是内网机子程序需要访问外网,做正向代理. 2. 软件 ...
- ssh连接工具中文乱码问题
在终端运行: export LC_ALL=zh_CN.GB2312;export LANG=zh_CN.GB2312
- git 查看暂存区
一.简介 git ls-files 命令是用来查看暂存区中文件信息 二.常用参数 参数说明(括号里是简写) --cached(-c)显示暂存区中的文件,git ls-files命令默认的参数 --de ...
- 商城项目,java返回json数据,报错406
前言: 项目结构为maven,搭建好架构,整合ssm,进行测试, 从数据库中查询数据,返回json数据,结果报错406 问题: 解决: 1,确定项目中json包是否存在(极大可能出于此) 2,处理器适 ...
- SpringMVC+MyBatis+MySQL 8小时链接断开
org.springframework.web.util.NestedServletException: Request processing failed; nested exception is ...
- Spring学习手札(一)
Spring能做什么 1. 能根据配置文件创建及组装对象之间的依赖关系: 2. 面向切面编程,能帮助我们无耦合的实现日志记录,性能统计,安全控制等: 3. 提供第三方数据访问框架(如Hibernate ...
- SpringCloud学习指南【更新】
一. 推荐学习博客主页[更新] Spring Cloud 系列文章(纯洁的微笑,强烈推荐系列文章) Spring Cloud系列教程 (周立大大,强烈推荐) Spring Cloud入门到实战系列教程 ...