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

前言

事件冒泡,可能有些朋友还不是很清楚,什么是事件冒泡?来看个简单例子。

<div onclick="alert('BIG BOX')">
	<div onclick="alert('MIDDLE BOX')">
		<a id="ahref" href="#" onclick="alert('MIN BOX')">点我一下</a>
	</div>
</div>

点击“点我一下”,会依次弹出:MIN BOX---->MIDDLE BOX---->BIG BOX---->然后跳转链接,这就是事件冒泡,下面来看看如何解决这个问题(关于捕获方面问题下篇博客准备分享给大家)

JavaScript解决事件冒泡

1.event.stopPropagation()

$(function() {
	$("#ahref").click(function(event) {
		event.stopPropagation();
	});
});

再点击“点我一下”,只弹出:MIN BOX---->然后跳转链接,此时就已经阻止了事件向上冒泡。

2.return false;

$(function() {
$("#ahref").click(function(event) {
       return false;
});
});

再点击“点我一下”,只弹出:MIN BOX,但不会跳转链接,此时也就已经阻止了事件向上冒泡。
由此可以看出

event.stopPropagation() 事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)

return false事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)

Vue解决事件冒泡

Vue.jsv-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事件绑定可以阻止冒泡事件向上冒泡

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值