How to solve the problem of preventing bubbling of binding events from failing in the VUE framework

Below I will share with you an article about how Vue monitors scrolling events to achieve a certain element ceiling or fixed position display method. It has a good reference value and I hope it will be helpful to everyone.

One problem I encountered before is that the VUE framework has done some internal processing so that when we add new elements when rendering the DOM through v-for, the binding event can also be effective for the new elements.

The problem encountered this time is that in the original binding event (the function was not written in the methods of the vue instance), preventing the bubbling event failed. Neither return false nor event.stopPropagation(); are valid.

At this time, you need to use the event modifier provided by VUE to handle it, such as preventing the event from bubbling @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>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<p v-on:click.capture="doThis">...</p>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<p v-on:click.self="doThat">...</p>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

nodejs example of how to connect to mongodb database

Configure vuex in mpvue and persist it to local Storage graphics and text Tutorial analysis

Simple web server function example implemented by nodejs

The above is the detailed content of How to solve the problem of preventing bubbling of binding events from failing in the VUE framework. For more information, please follow other related articles on the PHP Chinese website!