前言
事件冒泡,可能有些朋友还不是很清楚,什么是事件冒泡?来看个简单例子。
<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.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事件绑定可以阻止冒泡事件向上冒泡