前言
事件冒泡，可能有些同學(xué)還不是很清楚告私，什么是事件冒泡屎暇？來(lái)看個(gè)簡(jiǎn)單例子。
<div onclick="alert('最外層')">
<div onclick="alert('中間層')">
<a id="ahref" onclick="alert('最里層')">點(diǎn)擊我</a>
</div>
</div>
點(diǎn)擊“點(diǎn)擊我”,會(huì)依次彈出：最里層---->中間層---->最外層---->然后跳轉(zhuǎn)鏈接驻粟，這就是事件冒泡根悼，下面來(lái)看看如何解決這個(gè)問(wèn)題
JavaScript解決事件冒泡
event.stopPropagation()
$(function() {
$("#ahref").click(function(event) {
event.stopPropagation();
});
});
再點(diǎn)擊“點(diǎn)擊我”挤巡，會(huì)彈出：最里層---->然后跳轉(zhuǎn)鏈接
return false;
$(function() {
$("#ahref").click(function(event) {
return false;
});
});
再點(diǎn)擊“點(diǎn)擊我”，會(huì)彈出：最里層酷麦，但不會(huì)跳轉(zhuǎn)鏈接
event.preventDefault()
$(function() {
$("#ahref").click(function(event) {
event.preventDefault()
});
});
點(diǎn)擊“點(diǎn)擊我”矿卑，依次彈出：最里層---->中間層---->最外層，但最后沒(méi)有跳轉(zhuǎn)鏈接
由此可以看出
event.stopPropagation()
事件處理過(guò)程中贴铜，阻止了事件冒泡粪摘，但不會(huì)阻擊默認(rèn)行為（它就執(zhí)行了超鏈接的跳轉(zhuǎn)）
return false
事件處理過(guò)程中瀑晒，阻止了事件冒泡绍坝，也阻止了默認(rèn)行為（比如剛才它就沒(méi)有執(zhí)行超鏈接的跳轉(zhuǎn)）
event.preventDefault()
事件處理過(guò)程中，不阻擊事件冒泡苔悦，但阻擊默認(rèn)行為（它只執(zhí)行所有彈框轩褐，卻沒(méi)有執(zhí)行超鏈接跳轉(zhuǎn)）
Vue解決事件冒泡
Vue.js為v-on提供了 事件修飾符，我們只需要添加click.stop即可防止事件冒泡
<div @click="cancelSelect">
<div class="picker_alert" @click.stop>
<div class="ofh">
<span @click="toRoomManagement">編輯</span>
<span @click="confirmRoom">確定</span>
</div>
</div>
</div>
vue事件修飾符
.stop
.prevent
.capture
.self
.once
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>
提示：使用修飾符時(shí)玖详，順序很重要把介；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此蟋座，用 @click.prevent.self 會(huì)阻止所有的點(diǎn)擊拗踢，而 @click.self.prevent 只會(huì)阻止元素上的點(diǎn)擊。
小程序解決事件冒泡
<view bindtap='tap'>
<view id='5' catchtap='catTap'></view>
</view>
bind事件綁定不會(huì)阻止冒泡事件向上冒泡向臀，catch事件綁定可以阻止冒泡事件向上冒泡巢墅。
公告
喜歡小編記得點(diǎn)擊關(guān)注哦，原創(chuàng)文章等你哦=>web秀
