Rumah >hujung hadapan web >tutorial js >如何解决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>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
mpvue中配置vuex并持久化到本地Storage图文教程解析
Atas ialah kandungan terperinci 如何解决VUE框架中导致绑定事件的阻止冒泡失效问题. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!