解决VUE框架导致绑定事件的阻止冒泡失效问题

更新时间：2018年02月24日 15:57:11 作者：heartOfblack

下面小编就为大家分享一篇vue监听滚动事件实现某元素吸顶或者固定位置显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

前面遇到了一个问题就是VUE框架内部做了一些处理，使得在我们通过v-for渲染DOM的时候添加新元素的时候，绑定事件也能对新增的元素有效。

而这次遇到的问题则是，原本绑定事件中（该函数没有写在vue实例的methods中），导致阻止冒泡事件失效了。无论是return false 还是event.stopPropagation();都无效。

此时需要通过用VUE提供了事件修饰符来处理，比如阻止事件冒泡@click.stop='xx()'

.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>

以上这篇解决VUE框架导致绑定事件的阻止冒泡失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue2.X 通过AJAX动态更新数据
这篇文章主要介绍了Vue2.X 通过AJAX动态更新数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-07-07
vuedraggable拖拽到目标区域实现过程解析
这篇文章主要为大家介绍了vuedraggable拖拽到目标区域实现过程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
vue中echarts关系图动态增删节点以及连线方式
这篇文章主要介绍了vue中echarts关系图动态增删节点以及连线方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
由浅入深讲解vue2和vue3的区别
最近发现很多要求Vue3的技术了,不得不说it技术的更新真的太快了,作为vue2老用户,我们在学习Vue3前应该了解他们的区别以及背后的原因,下面这篇文章主要给大家介绍了关于vue2和vue3区别的相关资料,需要的朋友可以参考下
2023-02-02
vue 注释template中组件的属性说明
这篇文章主要介绍了vue 注释template中组件的属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue同一路由强制刷新页面的实现过程
这篇文章主要介绍了解决VUE同一路由强制刷新页面的问题，本文给大家分享实现过程，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-08-08
vue中英文切换实例代码
在本篇文章里小编给大家整理了关于vue中英文切换实例代码，需要的朋友们学习参考下。
2020-01-01
Vue 自定义组件 v-model 使用详解
这篇文章主要介绍了Vue 自定义组件 v-model 使用介绍,包括vue2中使用和vue3中使用，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
vue elementUI 表单校验功能之数组多层嵌套
这篇文章主要介绍了vue elementUI 表单校验（数组多层嵌套）功能的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-06-06
vue.js this.$router.push获取不到params参数问题
这篇文章主要介绍了vue.js this.$router.push获取不到params参数问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03