Vue——事件修饰符

事件修饰符:
stop  阻止冒泡

prevent  阻止默认事件

capture  添加事件侦听器时使用事件捕获模式

self  只当时间在该元素本身(比如不是子元素)触发时触发回调

once  事件只触发一次

---------------------------------------------------------

sopt:

如果没有没有设置阻止冒泡事件,子元素就会向父元素产生冒泡事件

添加stop后

prevent:

首先我们一个a标签添加跳转链接跳至百度

没添加prevent前

添加prevent后

capture:

没添加capture前

添加capture

 self:(注意点,不会真正阻止冒泡事件的触发,跨过一层还是会继续冒泡的)

只有通过点击本身才会触发事件,不会通过冒泡或捕获来触发

once:

原文地址:https://www.cnblogs.com/yangpeixian/p/11699757.html

时间: 2024-10-09 08:10:03

Vue——事件修饰符的相关文章

Vue—事件修饰符

Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通过由点 (.) 表示的指令后缀来调用修饰符. .stop.prevent.capture.self.once <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面

vue 事件修饰符

1.修饰符种类 .stop .prevent .capture .self .once .passive 2.self修饰符说明 <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> 使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生.因此,用 v-on:click.prevent.

vue事件修饰符

.stop 使用该修饰符可以停止事件冒泡 .prevent 使用该修饰符可以阻止表单提交时的页面刷新等浏览器默认行为 .capture 如果含有嵌套结构,且使用了该修饰符,那么事件函数执行顺序是:先执行 由外到内 含有该修饰符的事件(没有被直接或间接触发的除外),再冒泡触发 .self 只能直接触发,子事件冒泡不会触发,但本身还是会冒泡触发父元素的事件 .once 事件函数只调用一次 .passive 提升页面滚动顺滑度 https://blog.csdn.net/dj0379/article/

VUE事件修饰符.passive、.capture、.once实现原理——重新认识addEventListener方法

https://www.jianshu.com/p/b12d0d3ad4c1 .passive的作用与使用场景 https://juejin.im/post/5ad804c1f265da504547fe68 .passive的实现原理 原文地址:https://www.cnblogs.com/macliu/p/11733871.html

VUE的事件修饰符

<div id="ON" v-on:click="handle0"> <p v-text="num"></p> @*v-on:click.stop="handle" 事件修饰符,在事件后面加.stop表示不再冒泡*@ <input id="Button1" v-on:click.stop="handle" type="button&qu

Vue学习之路第八篇:事件修饰符

学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .prevent:阻止默认事件 .capture:事件捕获 .self:只当事件在该元素本身触发时触发回调 .once:事件只触发一次 1.阻止冒泡 页面代码: <div id="app" @click="clickDiv()">

vue学习(六) 事件修饰符 stop prevent capture self once

//html <div id="app"> <div @click="divHandler" style="height:150px,background-color:darkcyan"> <input type="button" value="点击" @click="btnHandler"> </div> <a href="

VueJS 事件修饰符

事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. 为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符.通过由点(.)表示的指令后缀来调用修饰符. .stop .prevent .capture .self .once <!-- 阻止单击事件冒泡 -->

事件修饰符

<div style="margin-top:100px"> <!--事件的监听--> <!--事件修饰符--> <div id="app"> <!--prevent 阻止默认事件的触发,这里地方会阻止跳转链接--> <a href="http://www.baidu.com" v-on:click.prevent>我是百度</a> <!--prevent