Vue-事件修饰符的使用详解

拼搏现实的明天。 2021-12-01 15:12 306阅读 0赞

#### 事件修饰符 ####

##### .stop #####

*  .stop 阻止事件冒泡
    
        <div :class="box" @click="boxClick">
            <div :class="section" @click="sectionClick">
                <input type="button" name="" :value="msg" @click.stop="btnClick">
            </div>
        </div>

##### .prevent #####

*  阻止默认事件（如：链接跳转、表单提交。。。）
    
        <a href="http://www.baidu.com" v-text="msg2" @click.prevent="consoleInfo" >点击后不会跳转到链接地址</a>

##### .capture #####

*  添加事件侦听器时使用事件捕获模式（执行事件捕获阶段，由外向内触发事件）
    
        <div :class="box" @click.capture="boxClick">
            <div :class="section" @click.capture="sectionClick">
                <button name="" @click="btnClick">点击该按钮后会由外到内触发事件</button>
            </div>
        </div>

##### .self #####

*  只有当事件在该元素本身触发时才会执行事件（触发回调），可阻止自身的冒泡或捕获阶段。
    
        <div :class="box" @click="boxClick">
            <div :class="section" @click.self="sectionClick">
                <button name="" @click="btnClick">点击不会触发父级元素的事件</button>
            </div>
        </div>

##### .once #####

*  事件只触发一次
    
        
        <a name="" @click.prevent.once="btnClick" href="http://www.baidu.com">超链接</a>

发表评论取消回复

表情：

评论列表（有 0 条评论，306人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue使用shop修饰符阻止事件冒泡

使用shop修饰符在点击事件中阻止事件冒泡的上一层DOM  <div id="app"> <div clas

深藏阁楼爱情的钟/ 2023年07月11日 06:21/ 0 赞/ 14 阅读

相关 Vue事件修饰符的使用

Vue2.0学习笔记：Vue事件修饰符的使用事件处理如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量`$event`，把它传入到methods中的方

红太狼/ 2023年02月28日 11:23/ 0 赞/ 6 阅读

相关 Vue 事件修饰符

在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以在方法中轻松实

心已赠人/ 2022年12月22日 09:20/ 0 赞/ 227 阅读

相关 vue修饰符（事件修饰符，表单元素修饰符，按键修饰符）

注意修饰符可连缀事件修饰符 @事件名.修饰符=“” .prevent 拦截默认事件 .stop 拦截冒泡事件 .capture 改变事件执行顺序 .se

绝地灬酷狼/ 2022年11月29日 11:26/ 0 赞/ 213 阅读

相关 Vue事件修饰符的使用

![06e7d462e0f831ffa919be27a1d0acf5.png][] 事件处理如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event

墨蓝/ 2022年09月03日 10:28/ 0 赞/ 234 阅读

相关 vue.js中的事件修饰符的使用

事件修饰符: .stop .prevent .capture .self .once 1 .stop：阻止事件冒泡。 2.prevent：阻止默认事件。 3.capt

ゞ浴缸里的玫瑰/ 2022年06月03日 10:21/ 0 赞/ 181 阅读

相关黑马学习记录--vue 事件修饰符详解

转载：[https://blog.csdn.net/bk\_yzw/article/details/78795182][https_blog.csdn.net_bk_yzw_a

约定不等于承诺〃/ 2022年03月20日 12:09/ 0 赞/ 284 阅读

相关 Vue修饰符（事件修饰符、按键修饰符...）

基本页面 1. 修饰符修饰符是由点开头的指令后缀来表示的 2. 下载vue.js并引入 3. 初始化vue实例 <!DOCTYPE html

秒速五厘米/ 2022年03月18日 08:38/ 0 赞/ 416 阅读

相关 vue 事件修饰符

> <!DOCTYPE html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <m

朱雀/ 2022年02月21日 08:55/ 0 赞/ 320 阅读

相关 Vue-事件修饰符的使用详解

事件修饰符 .stop .stop 阻止事件冒泡 <div :class="box" @click="boxClick">

拼搏现实的明天。/ 2021年12月01日 15:12/ 0 赞/ 307 阅读