事件冒泡，可能有些同學還不是很清楚，什麼是事件冒泡？來看個簡單例子。

<div onclick="alert("最外層")">

<div onclick="alert("中間層")">

</div>

</div>

JavaScript解決事件冒泡

event.stopPropagation()

$(function() {

$("#ahref").click(function(event) {

event.stopPropagation();

});

});

return false;

$(function() {

　　$("#ahref").click(function(event) {

　　　　return false;

　　});

});

event.preventDefault()

$(function() {

　　$("#ahref").click(function(event) {

　　　　event.preventDefault()

　　});

});

由此可以看出

event.stopPropagation() 事件處理過程中，阻止了事件冒泡，但不會阻擊預設行為（它就執行了超連結的跳轉）

return false 事件處理過程中，阻止了事件冒泡，也阻止了預設行為（比如剛才它就沒有執行超連結的跳轉）

event.preventDefault() 事件處理過程中，不阻擊事件冒泡，但阻擊預設行為（它只執行所有彈框，卻沒有執行超連結跳轉）

Vue解決事件冒泡

Vue.js為v-on提供了 事件修飾符，我們只需要新增click.stop即可防止事件冒泡

<div @click="cancelSelect">

<div @click.stop>

<div>

<span @click="toRoomManagement">編輯</span>

<span @click="confirmRoom">確定</span>

</div>

</div>

</div>

vue事件修飾符

.stop

.prevent

.capture

.self

.once

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat"></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

小程式解決事件冒泡

<view bindtap="tap">

<view catchtap="catTap"></view>

</view>

bind事件繫結不會阻止冒泡事件向上冒泡，catch事件繫結可以阻止冒泡事件向上冒泡。