技術標籤：Vue

<div id="app">
			
			<!-- .stop阻止冒泡行為 -->
			<!-- <div class="innerDiv" @click="innerClick">
				<input type="button" value="按鈕" @click.stop="btnClick" />
			</div> -->
			
			<!-- .prevent 阻止預設事件 -->
 

			<!-- <a href="http://www.baidu.com" @click.prevent="aClick">這是一個百度</a> -->
			
			<!-- .capture 實現捕獲觸發事件的機制 -->
			<!-- <div class="innerDiv" @click.capture="innerClick">
				<input type="button" value="按鈕" @click="btnClick" />
			</div> -->
 

			
			<!-- .stop 和 .self 的區別：.self 只會阻止自己身上的冒泡行為不會阻止別人；.stop 阻止所有的冒泡行為 -->
			
			<!-- .self 阻止自身的冒泡行為 -->
			<!-- <div class="outer" @click="outerClick">
				<div class="innerDiv" @click.self="innerClick">
					<input type="button" value="按鈕" @click="btnClick" />
				</div>
			</div> -->
 

			
			<!-- .once 只阻止一次 -->
			<a href="http://www.baidu.com" @click.prevent.once="aClick">這是一個百度</a>
			
		</div>

var vm = new Vue({
	el: '#app',
	data: {
		
	},
	methods: {
		innerClick(){
			console.log('這是innerDiv的點選事件');
		},
		btnClick(){
			console.log('這是btn input點選事件');
		},
		aClick(){
			console.log('這是一個a標籤');
		},
		outerClick(){
			console.log('這是outer div 的點選事件');
		}
	}
})