事件修飾符
阿新 • • 發佈：2020-09-10
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent { width: 250px; height: 100px; background-color: lightseagreen; } .grandParent { width: 350px; height: 200px; background-color: lightcoral; } </style> </head> <body> <div id="app" class="grandParent" @click="grandParent"> <!-- 預設的冒泡機制--> <!-- <div class="parent" @click="parentClick">--> <!--<button class="btn" v-text="msg" @click="btnClick"></button>--> <!-- </div>--> <!-- .stop阻止事件冒泡--> <!-- <div class="parent" @click="parentClick">--> <!-- <button class="btn" v-text="msg" @click.stop="btnClick"></button>--> <!-- </div>--> <!-- .prevent阻止元素的預設事件--> <!-- <div class="parent" @click="parentClick">--> <!-- <a :href="myLink" @click.prevent="linkClick">歡迎進入vue官網</a>--> <!-- </div>--> <!-- .capture將js預設的冒泡機制轉變成捕獲機制--> <!-- <div class="parent" @click.capture="parentClick">--> <!-- <button class="btn" v-text="msg" @click="btnClick"></button>--> <!-- </div>--> <!-- .self只有自身能觸發事件，子元素不會被觸發--> <!-- <div class="parent" @click.self="parentClick">--> <!-- <button class="btn" v-text="msg" @click="btnClick"></button>--> <!-- </div>--> <!-- .once事件只能觸發一次--> <div class="parent" @click="parentClick"> <button class="btn" v-text="msg" @click.once="btnClick"></button> </div> </div> </body> <script src="../JS/Vue.js"></script> <script> let app = new Vue({ el: '#app', data: { msg: 'すき', myLink: 'https://cn.vuejs.org/', }, methods: { parentClick: function () { console.log('parent被點選'); }, btnClick: function () { console.log('button被點選'); }, linkClick: function () { console.log('link被點選'); }, grandParent: function () { console.log('grandParent被點選了'); } } }) </script> </html>