|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ /*margin: 0;padding: 0;*/ } #app{ width: 400px; } .outer{ background: #ff5000; height: 300px; margin-bottom: 40px; } .inter{ background: blue; height: 200px; width: 300px; } </style> </head> <body> <div id="app"> <!-- 冒泡：从里到外 依次执行事件 --> <!-- 1 stop: 阻止冒泡 @click.stop = "click" 给谁添加就是阻止谁外面的事件执行 比如： 给 btn 添加就是 inter 和 outer 都不执行 给 inter 添加就是 outer 不执行 --> <div class="outer" @click="outerClick"> <div class="inter" @click="interClick"> <button class="btn" @click.stop.once="btnClick">btn</button> </div> </div> <!-- 2 prevent: 阻止默认事件的执行 @click.prevent="click" a标签的href被阻止 不会发生跳转 --> <!-- 3 once: 绑定的所有事件都只被触发一次 once放事件前后无关 @click.prevent.once="aClick" 第一次会执行 点击事件aClick 和 阻止默认事件 触发了 a 点击事件 从第二次开始不再执行 点击事件aClick 和 阻止默认事件 会直接发生http://www.baidu.com跳转 @click.once.stop="btnClick" 第一次会执行 点击事件btnClick 和 阻止冒泡的stop事件 触发了 btn 点击事件 从第二次开始不再执行 点击事件btnClick 和 阻止冒泡的stop事件 触发了 inter 点击事件 触发了 outer 点击事件 --> <a href="http://www.baidu.com" @click.once.prevent="aClick">有问题找百度</a> <!-- 4 self: 只当事件在该元素本身（比如不是子元素）触发时触发回调 添加self的事件不会被动执行（比如不会冒泡），除非点击的是该元素 比如 @click.self="outerClick" 点击btn时： 触发了 btn 点击事件 触发了 inter 点击事件 点击inter时： 触发了 inter 点击事件 点击outer时： 触发了 outer 点击事件 @click.self="interClick" 点击btn时： 触发了 btn 点击事件 触发了 outer 点击事件 点击inter时： 触发了 inter 点击事件 触发了 outer 点击事件 点击outer时： 触发了 outer 点击事件 @click.self="btnClick" 点击btn时： 触发了 btn 点击事件 触发了 inter 点击事件 触发了 outer 点击事件 点击inter时： 触发了 inter 点击事件 触发了 outer 点击事件 点击outer时： 触发了 outer 点击事件 --> <div class="outer" @click="outerClick"> <div class="inter" @click="interClick"> <button class="btn" @click.self="btnClick">btn</button> </div> </div> <!-- 5 capture：事件捕获 添加capture的先捕获执行 执行之后其他的按照原来的冒泡顺序执行 --> <div class="outer" @click.capture="outerClick"> <div class="inter" @click="interClick"> <button class="btn" @click="btnClick">btn</button> </div> </div> </div> <script src="vue.js"></script> <script> let vue = new Vue({ el:"#app", methods:{ outerClick(){ console.log("触发了 outer 点击事件"); }, interClick(){ console.log("触发了 inter 点击事件"); }, btnClick(){ console.log("触发了 btn 点击事件"); }, aClick(){ console.log("触发了 a 点击事件") } } }) </script> </body> </html> |
|
|
