归纳DOM事件中各种阻止方法
前言
在复习事件这块的时候，发现了一个问题，网上很多文章对事件阻止这块解析的并不全面，并且有些文章也有错误之处，于是想自己总结一下，也方便自己的复习。
知识预热
事件冒泡和捕获
在看本篇文章之前，需要了解事件的冒泡和捕获，这里简单介绍下
事件冒泡： 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收，然后逐级向上传播到较为不具体的节点(文档)，可理解为：
由div->body->html->document
事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件，可理解为：
由document->html->body->divdom2级规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
dom事件绑定处理
与此同时，我们还需要了解dom事件绑定处理的几种方式
①、HTML事件处理(在dom元素中嵌入)
<button onclick="fn()"></button>缺点：
1、this指向window
2、HTML与JS紧密耦合，改动代码麻烦
②、DOM0级事件处理(获取dom元素直接绑定)
document.getElementById('btn').onclick = fn优点：
1、this指向dom元素
2、不存在浏览器兼容问题
③、DOM2级事件处理(事件监听)
document.getElementById('btn').addEventListener('click',fn)优点： this指向dom元素
缺点： 1、需要对IE8及以下进行兼容
document.getElementById('btn').attachEvent('click',fn)
由于IE8及以下只支持事件冒泡，所以通过attachEvent都会被添加到冒泡阶段，IE中的attachEvent中的this总是指向全局对象Window
方法详解
stopPropagation()
event.stopPropagation()作用： 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播
兼容：在IE<9的浏览器上使用 event.cancelBubble = true
preventDefault()
event.preventDefault()作用： 取消事件的默认动作
备注：只有cancelable属性为true的事件，才可以使用preventDefault()
兼容：在IE浏览器中通过 e.returnValue = false
return false
return falsereturn在函数中有三个作用：
1、用来返回一些值，当然也可以不写返回值
2、终止函数的执行，就是说在return之后的代码都不会执行
3、在DOM0级事件中，可以像event.preventDefault() 取消默认事件，但是在DOM2级则不行
stopImmediatePropagation()
event.stopImmediatePropagation()验证方法
接下来我们来验证一下，创建一个html文件,写入如下代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件和冒泡</title>
<style>
div{width: 300px; height: 300px; background-color: pink;}
</style>
<script>
// 接下来要写的代码
</script>
</head>
<body>
</body>
</html>本次验证所监听的事件是
oncontextmenuoncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
由于一个个验证比较麻烦，这里把所有的代码都写出来
第一个是针对DOM0级事件的JS代码
document.querySelector("div").oncontextmenu = function(event){
event.stopImmediatePropagation(); // 可以阻止事件传播
event.stopPropagation(); // 可以阻止事件传播
event.preventDefault(); // 可以阻止默认事件
return false; // 可以阻止默认事件
console.log("dom0-div");
};
document.oncontextmenu = function(event){
event.preventDefault(); // 可以阻止默认事件
return false; // 可以阻止默认事件
console.log("dom0-document");
};第二个是针对DOM2级事件的JS代码
document.querySelector("div").addEventListener('contextmenu', function(event){
event.stopImmediatePropagation(); // 可以阻止事件传播
event.stopPropagation(); // 可以阻止事件传播
event.preventDefault(); // 可以阻止默认事件
// return false; // 不能阻止默认事件
console.log("dom2-div")
});
document.addEventListener('contextmenu', function(event){
event.preventDefault(); // 可以阻止默认事件
// return false; // 不能阻止默认事件
console.log("dom2-document")
});验证是否可以成功阻止事件传播：
右击div元素，控制台查看是否有dom0-document 或者 dom2-document；
如果没有，则阻止成功，如果有，则阻止失败。
验证是否可以成功阻止默认事件：
右击鼠标，看是否会出现菜单栏；
如果没有，则阻止成功，如果有，则阻止失败。
这里重点提一下 stopImmediatePropagation()，
这个方法除了阻止事件冒泡还可以阻止相同事件的其他侦听器被调用。
看以下例子：
const div = document.querySelector('div');
document.addEventListener("click", (event) => {
console.log("document事件");
// event.stopImmediatePropagation()具有事件传播的效果，所以这里不会执行
});
div.addEventListener("click", (event) => {
console.log("第1个事件");
});
div.addEventListener("click", (event) => {
console.log("第2个事件");
event.stopImmediatePropagation();
});
div.addEventListener("click", (event) => {
console.log("第3个事件");
// event.stopImmediatePropagation()具有阻止相同事件的其他侦听器被调用的效果，所以这里不会执行
});来自：https://segmentfault.com/a/1190000018254460
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！