VUE フレームワークでバインディング イベントのバブリングが失敗しないようにする問題を解決する方法

ここで、Vue がスクロール イベントを監視して特定の要素の天井表示または固定位置表示を実現する方法についての記事を共有します。これは良い参考値であり、皆さんのお役に立てれば幸いです。

以前に遭遇した問題は、VUE フレームワークが内部処理を行っているため、v-for を介して DOM をレンダリングするときに新しい要素を追加すると、バインディング イベントが新しい要素に対しても有効になる可能性があるということです。

今回発生した問題は、元のバインディング イベント (vue インスタンスのメソッドに関数が記述されていない) で、バブリング イベントのブロックに失敗したことです。 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>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<p v-on:click.capture="doThis">...</p>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<p v-on:click.self="doThat">...</p>

以上、皆さんの参考になれば幸いです。

関連記事:

nodejs mongodb データベースに接続する方法の例

mpvue で vuex を設定し、ローカルストレージに永続化する グラフィックチュートリアル分析

nodejs 単純な Web サーバー関数の例

以上がVUE フレームワークでバインディング イベントのバブリングが失敗しないようにする問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。