如何阻止冒泡&&浏览器默认行为
摘要
很多同学对阻止事件冒泡和阻止事件默认行为容易混淆，项目中因为一些原因也需要阻止浏览器的一些默认行为，这里就简单总结一下。
阻止事件冒泡
什么是事件冒泡这里就不再赘述了，网上的文章一大把，这里就简述一下如何阻止事件冒泡，阻止事件冒泡在使用浏览器原生API的情况下，是需要分情况考虑的，毕竟有个个性的浏览器IE，这里分为IE实现和W3C标准实现。
在W3C标准实现中，我们阻止事件冒泡可以很容易使用标准API
基本语法：
event.stopPropagation();
IE实现下（这里主要指IE低版本IE9以下版本，因为IE9也实现了W3C标准）
基本语法：
event.cancelBubble = bool;
当然IE标准并不是只有IE支持，其实很多浏览器都实现了cancelBubble支持，但是后来虽然浏览器没有取消对cancelBubble属性的支持，设置了之后也会无效，所以建议的兼容语法是：
function eventCallback(e){
e = e||window.event;
if(e.stopPropagation){ //通过浏览器能力进行兼容性检测
e.stopPropagation();
}else if(e.cancelBubble){
e.cancelBubble = true;
}
}
当然说到阻止事件冒泡这个问题，也要简单提一下 event.stopPropagation 和event.stopImmediatePropagation的异同点：
- 相同点是两者都能阻止标准事件注册方式注册的事件 （addEventListener,IE是attachEvent）向父级节点继续冒泡
- 不同点从名字上可以看出，Immediate立即的意思，event.stopImmediatePropagation 不止能阻止往父级节点冒泡，还能阻止当前节点其它事件的继续执行（比如往一个元素上注册了多个事件，那么在第一个事件执行的时候，通过调用event.stopImmediatePropagation，会阻止其它事件的执行）
上面代码需要注意的一点是，IE下e不存在，从window中获取，简单做了兼容处理。可以尝试使用return false
阻止浏览器默认行为
在开始之前，首先需要了解什么是浏览器的默认行为，我这里简单举几个例子：
- 点击a标签，如果设置了href会执行跳转
- 点击输入框，输入框会获取焦点
- 点击右键，会弹出浏览器右键菜单
- 点击submit，会提交其所在表单
- 点击checkbox 会选中或者反选
还有其他的很多，这里就不一一列举了
同样的对于阻止浏览器默认行为的实现也分为W3C标准实现和IE实现（这里也只是指IE9以下的实现）
在W3C标准实现中，其基本语法如下：
event.preventDefault();
在IE实现中，其基本语法如下：
window.event.returnValue = false;
所以其兼容版本伪代码如下
function eventCallback(e){
e = e || window.event;
if(e.preventDefault){
e.preventDefault()
}else {
e.returnValue = false;
}
}
这里简单那checkbox做一个小的demo：
<!DOCTYPE>
<html>
<head>
<title>preventDefault Demo</title>
</head>
<body>
<h1>Please click on the checkbox</h1>
<form>
<label for="chk_just_for_test">Checkbox:</label>
<input type="checkbox" id="chk_just_for_test"/>
</form>
<script>
let chk = document.querySelector('#chk_just_for_test');
chk.addEventListener('click',e=>{
console.log('sorry ,do not let you check this checkbox');
e.preventDefault(); // 这里不考虑IE低版本兼容性问题
})
</script>
</body>
</html>
有兴趣的其它场景都可以写个小demo 玩玩。
同样W3C标准实现中，我们可以通过event.defaultPrevented 来确定event.preventDefault方法是否被调用，基本模式如下：
if (e.defaultPrevented) {
/* the default was prevented */
}
当然不是所有的事件都可以被cancel，浏览器也提供了cancelable属性来判断事件是否可以被取消，如果cancelable为false，那么便无法阻止浏览器的默认行为，如果在一个不可撤销的事件上调用preventDefault，会抛出错误，所以建议在调用之前判断事件是否可被取消.
下面是一个来自于mdn的例子，有兴趣的可以直接看原文
https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable
浏览器厂商提议滚轮事件只有第一次可被取消
function preventScrollWheel(event) {
if (typeof event.cancelable !== 'boolean' || event.cancelable) {
// The event can be canceled, so we do so.
event.preventDefault();
} else {
// The event cannot be canceled, so it is not safe
// to call preventDefault() on it.
console.warn(`The following event couldn't be canceled:`);
console.dir(event);
}
}
document.addEventListener('wheel', preventCancelableEvents);
总结
阻止默认冒泡和阻止浏览器默认行为需要关注的是兼容性问题，其它内容大家只需要关注mdn，已经很详细的列出了兼容问题，对前端&node有兴趣的欢迎微信交流，如果你能看到弹框弹出微信二维码的话
如何阻止冒泡&&浏览器默认行为的更多相关文章
- js阻止冒泡和默认事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery 阻止冒泡和默认事件
jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...
- js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- angular 点击事件阻止冒泡及默认行为
经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决? 类似原生JS ,只是语法稍有不同,如下: 阻止冒泡 $event.stopPropagation() ...
- 基本event封装：阻止冒泡、默认事件等
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ...
- Angular ngClick 阻止冒泡和默认行为
这其实是一个很简单的问题,如果你认真查看过Angular官方的API文档,本来不想记录的.但是这个问题不止一次的被人问起,所以今天在记录在这里. 在Angular中已经对一些ng事件如ngClick, ...
- 理解阻止浏览器默认事件和事件冒泡cancelBubble
一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...
- 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解
在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级 渐进增强(progressive enhancement): 针对低版本浏览器进 ...
- jQuery阻止冒泡和HTML默认操作
1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...
随机推荐
- Swift 学习笔记 (方法)
方法 是关联了特定类型的函数.类,结构体以及枚举都能定义实例方法,方法封装了给定类型特定的任务和功能.类,结构体和枚举同样可以定义类型方法,这是与类型本身关联的方法.类型方法与 Objective-C ...
- java ClassLoader类加载器
原文 首先来了解一下字节码和class文件的区别: 我们知道,新建一个java对象的时候,JVM要将这个对象对应的字节码加载到内存中,这个字节码的原始信息存放在classpath(就是我们新建Java ...
- Java基础之Comparable接口, Collections类，Iterator接口，泛型(Generic)
一.Comparable接口, Collections类 List的常用算法: sort(List); 排序,如果需要对自定义的类进行排序, 那就必须要让其实现Comparable接口, 实现比较两个 ...
- LeetCode：砖墙【554】
LeetCode:砖墙[554] 题目描述 你的面前有一堵方形的.由多行砖块组成的砖墙. 这些砖块高度相同但是宽度不同.你现在要画一条自顶向下的.穿过最少砖块的垂线. 砖墙由行的列表表示. 每一行都是 ...
- Java截取最后一个 _ 后面的所有字符
String file = http://localhost:8888/upload/20190310/115111_58_592_HDFS读取文件的流程.png //截取文件名 String ori ...
- python关于文件路径和文件名的操作
os.path.abspath(path) #返回绝对路径(包含文件名的全路径) os.path.basename(path) —— 去掉目录路径获取文件名 os.path.dirname(path) ...
- 发现eclipse红叉，查看markers发现Target runtime Apache Tomcat v8.0 is not defined
导入以前的项目(Markers中注意查看,就在console选项卡旁边),报以下错误,但不影响操作: Faceted Project Problem Target runtime Apa ...
- Linux_学习_01_常用命令大全
一.文件目录 1.列出目录 ls -a #显示隐藏文件 -l #显示文件和目录的详细资料 -h -lrt tree #显示文件和目录由根目录开始的树形结构 lstree #显示文件和目录由根目录开始的 ...
- __declspec(dllimport)的小秘密(转)
昨天和同事使用一个dll(lib+dll)的时候,发现他在引用头文件是,并没有使用__declspec(dllimport),但是程序完全运行正常,不明觉厉下,去网上翻了下资料,原来是链接器的原因,这 ...
- linux 多线程编程-读写者问题
#include <cstdio> #include <pthread.h> #include <unistd.h> ]; int i,j; pthread_rwl ...