前言
对事件进行处理。
一、事件修饰符
- prevent：阻止默认事件（常用）。
- stop：阻止事件冒泡（常用）。
- once：事件只触发一次（常用）。
- capture：使用事件的捕获模式。
- self：只有event.target是当前操作的元素时才触发事件。
- passive：事件的默认行为立即执行，无需等待事件的回调执行完毕。
二、实例
1.prevent
<a href=“www.baidu.com” @click.prevent=“show”>点击跳转正常情况下，点击会跳转到百度页面，但是对事件加了prevent修饰会阻止跳转。
代码如下（示例）：
<!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>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <style> * { margin: 20px; } </style> <body> <div id="root"> <a href="www.baidu.com" @click.prevent="show">点击跳转</a> </div> <script> new Vue({ el: "#root", methods: { show() { alert("你好"); } } }) </script> </body> </html>
2.stop
下面代码，如果不加stop修饰，会产生冒泡事件，会显示1 2 3
加完后只显示3
代码如下（示例）：
<!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>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <style> * { margin: 20px; } </style> <body> <div id="root"> <div @click="show1"> <div @click="show2"> <button @click.stop="show3">点击我</button> </div> </div> </div> <script> var vm = new Vue({ el: "#root", methods: { show3() { console.log("3"); }, show2() { console.log("2"); }, show1() { console.log("1"); } } }) console.log(vm); </script> </body> </html>
3.capture
记住要将除了最内层的其他所有外层都添加修饰符capture才能成功
<!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>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <style> * { margin: 20px; } </style> <body> <div id="root"> <div @click.capture="show1"> <div @click.capture="show2"> <button @click="show3">点击我</button> </div> </div> </div> <script> var vm = new Vue({ el: "#root", methods: { show3() { console.log("3"); }, show2() { console.log("2"); }, show1() { console.log("1"); } } }) console.log(vm); </script> </body> </html>
4.self
先让大家看一下event.target代码如下：
<!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>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <style> * { margin: 20px; } </style> <body> <div id="root"> <div @click="show1"> <button @click="show2">点击我</button> </div> </div> <script> var vm = new Vue({ el: "#root", methods: { show2(e) { alert("我是button"); console.log(e.target); }, show1(e) { alert("我是div"); console.log(e.target); } } }) console.log(vm); </script> </body> </html>
可以看出冒泡后，虽然最外层是div但是还是button事件
而self只有event.target是当前操作的元素时才触发事件，所以在div里添加self修饰符，相当于阻止了冒泡。
代码如下：
<!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>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <style> * { margin: 20px; } </style> <body> <div id="root"> <div @click.self="show1"> <button @click="show2">点击我</button> </div> </div> <script> var vm = new Vue({ el: "#root", methods: { show2(e) { alert("我是button"); console.log(e.target); }, show1(e) { alert("我是div"); console.log(e.target); } } }) console.log(vm); </script> </body> </html>
总结
以上就是事件修饰符的讲解。
