jquery全局拦截请求 js阻止事件捕获的方法有哪些 _生活百科

一、事件捕获【jquery全局拦截请求 js阻止事件捕获的方法有哪些】1、概念
事件捕获：从document到触发事件的那个节点，自上而下的去触发事件。
2、图解

文章插图
二、事件冒泡1、概念
事件冒泡：从触发事件的那个节点一直到document，是自下而上的去触发事件。
2、图解

文章插图
三、DOM事件流1、概念
DOM事件流相当于将事件捕获与事件冒泡两者结合起来，事件触发的顺序是先进行事件捕获阶段 => 目标元素阶段 => 事件冒泡阶段。
2、图解

文章插图
3、示例
绑定事件方法（addEventListener）的第三个参数是控制事件触发顺序的，默认为false，即事件冒泡；若为true,即事件捕获。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件</title><style>.boxA {width: 200px;height: 200px;background-color: blueviolet;}.boxB {width: 100px;height: 100px;background-color: pink;}.boxC {width: 50px;height: 50px;background-color: red;}</style></head><body><div class="boxA" id="boxA"><div class="boxB" id="boxB"><div class="boxC" id="boxC">目标</div></div></div><script>let boxA = document.getElementById("boxA");let boxB = document.getElementById("boxB");let boxC = document.getElementById("boxC");//目标元素boxC.addEventListener('click', function () { console.log("target1"); }, true);boxC.addEventListener('click', function () { console.log("target2"); }, true);// 事件冒泡boxB.addEventListener('click', function () { console.log("bubble1"); }, false);boxB.addEventListener('click', function () { console.log("bubble2"); }, false);// 事件捕获boxA.addEventListener('click', function () { console.log("capture1"); }, true);boxA.addEventListener('click', function () { console.log("capture2"); }, true);</script></body></html>4、结果

文章插图
五、事件捕获或事件冒泡的阻止1、用法
#当在事件流执行过程中，需要阻止后续的事件的执行，可以使用以下语法event.stopPropagation();2、示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件</title><style>.boxA {width: 200px;height: 200px;background-color: blueviolet;}.boxB {width: 100px;height: 100px;background-color: pink;}.boxC {width: 50px;height: 50px;background-color: red;}</style></head><body><div class="boxA" id="boxA"><div class="boxB" id="boxB"><div class="boxC" id="boxC">目标</div></div></div><script>let boxA = document.getElementById("boxA");let boxB = document.getElementById("boxB");let boxC = document.getElementById("boxC");//目标元素boxC.addEventListener('click', function (e) { console.log("target1"); e.stopPropagation(); }, true);boxC.addEventListener('click', function () { console.log("target2"); }, true);// 事件冒泡boxB.addEventListener('click', function () { console.log("bubble1"); }, false);boxB.addEventListener('click', function () { console.log("bubble2"); }, false);// 事件捕获boxA.addEventListener('click', function () { console.log("capture1"); }, true);boxA.addEventListener('click', function (e) { console.log("capture2"); }, true);</script></body></html>3、结果

文章插图
五、总结

事件函数执行顺序：捕获阶段的处理函数最先执行，其次是目标阶段的处理函数，最后是冒泡阶段的处理函数。目标阶段的处理函数，先注册的先执行，后注册的后执行。
事件阻止只能阻止后续的阶段事件并且未作用于同一元素上的事件函数。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：