• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

原生JavaScript和Vue小程序都是如何阻止事件冒泡的_CSS学习

当前位置：网站建设 > 技术支持

原生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事件绑定可以阻止冒泡事件向上冒泡。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。