<div id="app">
<div class="p-5">
<h6>預設情境</h6>
<a href="https://javascript.info/bubbling-and-capturing">冒泡事件參考文章</a>
<div class="p-3 bg-success" @click="trigger('div')">
<span class="box d-flex align-items-center justify-content-center" @click="trigger('box')">
<button class="btn btn-outline-secondary" @click="trigger('button')">按我</button>
</span>
</div>
<h6 class="mt-3">stopPropagation (防止向外尋找)</h6>
<div class="p-3 bg-success" @click="trigger('div')">
<span class="box d-flex align-items-center justify-content-center" @click.stop="trigger('box')">
<button class="btn btn-outline-secondary" @click="trigger('button')">按我</button>
</span>
</div>
<h6 class="mt-3">事件偵聽器時使用 capture 模式 (事件改為由外而內)</h6>
<div class="p-3 bg-success" @click.capture="trigger('div')">
<span class="box d-flex align-items-center justify-content-center" @click.capture="trigger('box')">
<button class="btn btn-outline-secondary" @click.capture="trigger('button')">按我</button>
</span>
</div>
<h6 class="mt-3">事件偵聽器時使用 self 模式 (只會觸發自己範圍內的)</h6>
<div class="p-3 bg-success" @click.self="trigger('div')">
<span class="box d-flex align-items-center justify-content-center" @click.self="trigger('box')">
<button class="btn btn-outline-secondary" @click.self="trigger('button')">按我</button>
</span>
</div>
<hr>
<h3 class="mt-3">事件偵聽器只觸發一次 once</h3>
<div class="p-3 bg-success" @click.once="trigger('div')">
<span class="box d-flex align-items-center justify-content-center" @click.once="trigger('box')">
<button class="btn btn-outline-secondary" @click.once="trigger('button')">按我</button>
</span>
</div>
<hr>
</div>
</div>
const App = {
data() {
return {
text: '小明',
isTransform: true,
num: 10,
event: 'click',
}
},
methods: {
trigger: function(name) {
console.log(name, '此事件被觸發了')
}
}
};
Vue.createApp(App).mount('#app');
