原生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秀