vue中v-on的事件修饰符

最新推荐文章于 2021-10-28 10:31:11 发布
最新推荐文章于 2021-10-28 10:31:11 发布
阅读量474 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46044574/article/details/104796923
版权

（1） .stop：阻止冒泡
在这里插入图片描述
（2）. prevent：阻止默认事件的发生
默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会 重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。
在这里插入图片描述
（３）. capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自 然顺序执行触发的事件。
在这里插入图片描述
效果图
在这里插入图片描述
（４）. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响
在这里插入图片描述
（５）. once：设置事件只能触发一次

<a v-on:click.once="doThis"></a>
哎一古哎一古
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 之事件修饰符 阻止事件冒泡 .stop .prevent .capture .self .once
夜阑珊妖妖
11-21 958
弹层，点击空白处隐藏； <div class="tanceng" @click="blank"> <div class="main" @click.stop> <!-- ... --> <p class="btn" @click="btn">提交</p> </div> </div> 问题：点main ...
详解vue中v-on事件监听指令的基本用法
10-15
主要介绍了详解vue中v-on事件监听指令的基本用法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
vue事件修饰符(stop,prevent,self,once)
木泽锐
10-28 688
Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。 .stop ：阻止事件冒泡 .prevent ：阻止默认事件发生，比如超链接的默认跳转、表单的提交（重点） .self ：只有元素自身触发事件才执行。（子元素的事件冒泡来的不执行） .once ：只执行一次 举例： //使用prevent，点击提交之后调用updateUser()方法 <form @submit.prevent="updateUser"> 用户名:<input type="text
vue指令v-on和事件修饰符的使用
安之ccy的博客
04-28 588
vue指令v-on： 可以搭配事件使用，后面跟上事件处理函数，如： 点击事件：v-on:click="clickFunction" 鼠标移动事件：v-on:mousemove="getPosition" v-on:事件=事件处理函数(形参, $event) 两个参数可选 当没有传入形参时，默认有一个事件参数event，不用手动传 事件修饰符： 如： 阻止冒泡：.stop 取消默认事件：.prevent 匹配回车触发：.enter 匹配空格触发：.space等等 事件修饰符可以串联使用，如.stop.pre
（简）事件指令v-on：修饰符
蜗居的夜猫
04-06 396
文章目录修饰符 修饰符 1.在@绑定的事件后加小圆点“.”，在跟一个后缀来使用修饰符。Vue支持以下修饰符： .stop .prevent .capture .self .once 具体用法如下： <!--阻止单击事件冒泡 --> <a @click.stop="handle"></a> <!--提交事件不再重载页面 --> <form @...
Vue.js v-on指令的事件修饰符
qq_41416856的博客
06-13 784
Vue指令 v-on 事件修饰符 .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 .once 事件只触发一次 <!DOCTYPE html> <html lang="en"> ...
vue事件修饰符和按键修饰符用法总结
08-29
通过在 v-on 指令后添加一个点（.）和修饰符名称，可以在事件处理程序中调用修饰符。常见的事件修饰符有： * .prevent：阻止事件的默认行为 * .stop：阻止事件冒泡 * .capture：捕获事件 * .self：事件只触发在当前...
浅谈Vue.js中的v-on(事件处理)
10-19
这些基础知识构成了Vue.js中事件处理的基础。通过v-on指令及其修饰符，开发者可以灵活地响应用户操作，实现复杂的交互逻辑，同时保持代码的整洁和可维护性。了解并熟练掌握这些概念对于有效地使用Vue.js构建现代Web...
Vue.js学习笔记之修饰符详解
12-09
在本篇学习笔记中，我们将深入探讨Vue.js中两个重要指令——`v-model`和`v-on`的修饰符，这些修饰符可以增强它们的功能，提供更灵活的使用方式。 **一、v-model的修饰符** 1. **.lazy**： `.lazy` 修饰符改变了`v...
vue中事件修饰符
qq_38677540的博客
05-23 330
Vue.js 为v-on提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 .stop .prevent .capture .self .once passive stop 阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation() <!-- 阻止事件冒泡 --> <a v-on:click.stop="doThis"></a> prevent 阻止默认事件发生，默认事件指对DOM的操作会...
v-on事件修饰符及按键修饰符
sleepwalker_1992的专栏
09-29 4631
v-on 事件修饰符 常用的事件修饰符有： .stop  阻止事件冒泡 .self  当事件在该元素本身触发时才触发事件 .capture 添加事件侦听器是，使用事件捕获模式 .prevent  阻止默认事件 .once 事件只触发一次 什么是事件冒泡 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
vue.js事件修饰符.stop阻止单击事件冒泡
weixin_30364325的博客
09-07 283
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。其中.stop就是用来阻止单击事件冒泡，用法如：<a v-on:click.stop="doThis"></a> 下面是全部代码： <!...
Vue.js 中v-on的事件修饰符【笔记】
单枪匹码
06-09 1376
1、Vue.js中修饰符使用：在指令后缀通过点( . )来调用修饰符。 <a v-on:click.stop="doThis"></a> 举个例子：一个嵌套div，分别添加click事件。 <div id="aa" @click="doaa"> <div id="bb" @click="dobb"></div> </div> 点击以后会相继执行dobb和doaa方法，此时我们可以通过加修饰符的方式来阻止冒泡事件。 <div
Vue.js入门笔记（五）--v-on鼠标移动事件和阻止事件传播
java阳旭的博客
05-23 3789
案例：div 内部有一个 textarea，当鼠标移动到 div 作用域上，提示“鼠标移动到了 div 上了”，当鼠标移动到 textarea 作用域上时，提示“鼠标移动到了 textarea 上了”。 1、原生 JavaScript 的 onmouseover 事件 <div onmouseover="divmouseover()" id="div"> <textarea onmouseover="textareamouseover()">这是一个文件域</textarea
v-on 修饰符
ZZZxxA123的博客
06-25 136
事件修饰符： .stop 阻止事件传播（与冒泡有关） .capture 在冒泡中优先执行（与冒泡有关） .self 触发自身时才会执行，在事件传递中不会执行（与冒泡有关） .once 只触发一次回调 .prevent 阻止默认事件 .passive 与touch事件有关，用于优化移动端性能，以 { passive: true } 模式添加侦听器 注意： passive和prevent不能在一起使用，因为prevent会被忽略，并向你展示一个警告（浏览器不想阻止默认事件行为）。 按键...
v-on指令修饰符大全
桃花扇的博客
07-28 5118
目录 1.事件修饰符 1）.stop 2）.prevent 3）.capture 4）.self 5）.once 6）.passive 2.按键修饰符 3.系统修饰键 4.鼠标按钮修饰符 1.事件修饰符 1）.stop 作用：调用event.stop，阻止事件冒泡 <div id="app"> <div @click="fatherClick"> <button @click.stop="childClick">cli
小王的js学习笔记（四）——DOM事件
小王的博客
10-25 167
DOM事件 JavaScript与HTML之间的交互是通过事件实现的。 事件三要素 事件目标（event target）也就是事件源，事件被触发的对象。 事件处理程序（event handler）通常是一个函数。 事件对象（event object），触发事件的类型（MouseEvent等）。 事件流 事件冒泡（IE事件流）：事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点（由内往外）。 事件捕获（Netscape事件流）：与事件冒泡相反，由外向内。 DOM事件流 DOM二级事件规定事件流
vue学习 四 v-on的事件修饰符和按键修饰符
meihuasheng的博客
08-11 956
方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，为了解决这个问题，Vue.js 为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。 .stop 阻止事件继续传播 .prevent 阻止标签的默认事件发生 .capture .self .once 事件只会发生一次 .passive <!-- ...
vue指令之事件修饰符及v-on的使用
weixin_44748596的博客
10-04 395
1,vue中用v-on绑定事件，用click事件举例： v-on:click="outershow" 简写为：@click="outershow" <div id="app"> <div class="outer" @click="outershow"> <div class="inner" @click="innershow"> ...
vue的v-on作用和事件对象以及修饰符使用
最新发布
02-17
Vue中的v-on指令用于绑定事件处理程序。它可以用于监听DOM事件，自定义组件事件以及指令事件。v-on的值通常是一个方法名或者一个内联JavaScript语句，当触发事件时，这个方法或语句会被执行。 事件对象是指在事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值