如何解決VUE框架中導致綁定事件的阻止冒泡失效問題

下面我就為大家分享一篇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>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<p v-on:click.capture="doThis">...</p>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<p v-on:click.self="doThat">...</p>

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

nodejs實作連接mongodb資料庫的方法範例

mpvue中配置vuex並持久化到本機Storage圖文教學解析

nodejs實作的簡單網頁伺服器功能範例

#

以上是如何解決VUE框架中導致綁定事件的阻止冒泡失效問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！