原生JavaScript和Vue、小程序都是如何阻止事件冒泡的?
2020/3/16 4:01:25
本文主要是介绍原生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秀
这篇关于原生JavaScript和Vue、小程序都是如何阻止事件冒泡的?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2021-08-23微信小程序开发 —— 基础知识
- 2021-07-26小程序自定义标题栏写法(适配各种大小刘海屏)
- 2021-07-25小程序如何实现自定义tabBar
- 2021-07-25微信小程序如何在父组件中修改子组件的样式