解决VUE框架 导致绑定事件的阻止冒泡失效问题
编程学习 2021-07-04 17:33www.dzhlxh.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家分享一篇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框架 导致绑定事件的阻止冒泡失效问题就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。