原生JavaScript和Vue、小程序都是如何阻止事件冒泡的？

前言

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

<div onclick="alert('最外層')">
	<div onclick="alert('中間層')">
		<a id="ahref" href="http://www.javanx.cn" onclick="alert('最裏層')">點擊我</a>
	</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 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>
 
<!-- 提交事件再也不重載頁面 -->
<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>
複製代碼

提示：使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 @click.prevent.self 會阻止全部的點擊，而 @click.self.prevent 只會阻止元素上的點擊。

小程序解決事件冒泡

<view bindtap='tap'>
  <view id='5' catchtap='catTap'></view>
</view>
複製代碼

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。

公告

喜歡小編記得點擊關注哦，原創文章等你哦=>web秀