目录
一: 事件流概述
二：阻止事件冒泡
例子：原生js案例阻止事件冒泡
例子：Vue2中的阻止事件冒泡的写法
三：阻止默认行为
例子：原生js案例阻止事件默认行为
例子：Vue2中的阻止默认行为的写法
一: 事件流
事件发生时会在元素节点和根节点之间按照特定的顺序传播，路径所经过的所有结点都会收到该事件，这个传播过程即DOM事件流。
两种事件流模型：捕获型事件流、冒泡型事件流。
1）冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM的叶子到根（从内到外），简单的理解（冒泡像潜泳吐泡泡），你品你细品，hhh~
2）捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM的根到叶子（从外到内），简单的理解（捕获像警察搜捕嫌疑人），你品你细品，hhh~
二：阻止事件冒泡
阻止冒泡：（在当前要阻止冒泡的事件函数中调用下面一种即可）
两种方式：① event.cancelBubble = true;
② event.stopPropagation();
例子：原生js案例阻止事件冒泡
案例解析：如果不阻止，点击内层div,内层div的事件执行完，会传播到外层div,执行外层div的事件，即冒泡型事件流
<!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>#div1{width: 300px;height: 300px;border: 1px solid #000;background-color: red;border-radius: 50%;}#div2{width: 150px;height: 150px;border: 1px solid #000;margin: 75px auto;background-color: black;border-radius: 50%;}</style></head><body><div id="div1"><div id="div2"></div></div><script>document.querySelector("#div1").onclick = function(){alert("触发了外层div")}document.querySelector("#div2").onclick = function(){alert("触发了内层div")// 阻止事件冒泡event.stopPropagation()}</script></body></html>
例子：Vue2中的阻止事件冒泡的写法
<!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><script src="../vue.js"></script><style>[v-cloak]{display: block;}.parent,.son,.sun{border: 1px solid #000;border-radius: 50%;}.parent{width: 300px;height: 300px;background-color: red;}.son{width: 200px;height: 200px;margin: 50px auto;background-color: aqua;}.sun{width: 100px;height: 100px;margin: 50px auto;background-color: black;}</style></head><body><div id="app"><div class="parent" @click="alert1()"><div class="son" @click.stop="alert2()"><div class="sun" @click.stop="alert3()"></div></div></div></div><script>var app = new Vue({el: "#app",data: {},methods: {alert1:function(){alert("父亲")},alert2:function(){alert("儿子")},alert3:function(){alert("孙子")}},})</script></body></html>
三：阻止默认行为
阻止默认行为：（在当前要阻止默认行为的事件函数中调用下面一种即可）
三种方式：① return false
② event.preventDefault()
③ event.returnValue = false
例子：原生js案例阻止事件默认行为
案例解析：阻止之后，form表单中的提交地址，就不提交，不进行网页跳转啦！
<!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>preventDefault</title></head><body><div><form action="" method="post"><button id="submitBtn">提交表单</button></form></div><script>document.querySelector("#submitBtn").onclick = function(){console.log("点击了表单提交按钮!")// 阻止默认行为event.preventDefault()}</script></body></html>
例子：Vue2中的阻止默认行为的写法
案例解析：阻止了才可以进行打印哦！
<!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><script src="../vue.js"></script></head><body><div id="app"><form action="" method="post"><button id="btn" type="submit" @click.prevent="f()">点击提交</button></form></div><script>var app = new Vue({el: "#app",data: {},methods: {f:function(){console.log("点击了表单提交按钮")// 阻止事件默认行为 或者 使用事件修饰符阻止// var ev = ev || event// ev.preventDefault()}},})</script></body></html>
