Vue——事件修饰符

文章目录

  • 前言
  • [阻止默认事件 prevent](#阻止默认事件 prevent)
  • [阻止事件冒泡 stop](#阻止事件冒泡 stop)

前言

在官方文档中对于事件修饰符有一个很好的说明,本篇文章主要记录验证测试的案例。

官方文档 事件修饰符

阻止默认事件 prevent

在js原生的语言中,可以根据标签本身的事件对象进行阻止默认事件操作,如下所示:

html 复制代码
<template>
    <h1>阻止默认事件</h1>
    <a @click="clickTest1" href="https://writing-bugs.blog.csdn.net/">专注写bug csdn</a>
</template>
<script>
export default{
    data(){
        return{
           
        }
    },
    methods:{
        clickTest1(e){
        	// js 原生 事件对象 方法 实现阻止默认事件
            e.preventDefault();
            console.log("点击了!");
        }
    }
}
</script>

<a>标签,增加href属性后,浏览器点击当前连接即可进行跳转操作,若只想点击后触发日志打印或其他操作,但不想跳转,则可以采取e.preventDefault() 进行默认事件的阻止。


Vue中有更加简单的实现方式,只需要在对应v-on绑定的click方法后增加对应的标识即可。如:@click.prevent="xxx"

html 复制代码
<template>
    <h1>阻止默认事件</h1>
    <a @click="clickTest1" href="https://writing-bugs.blog.csdn.net/">专注写bug csdn</a>
    <br>
    <hr>
    <a @click.prevent="clickTest2" href="https://writing-bugs.blog.csdn.net/">专注写bug csdn</a>
</template>
<script>
export default{
    data(){
        return{
           
        }
    },
    methods:{
        clickTest1(e){
            e.preventDefault();
            console.log("点击了!");
        },
        clickTest2(){
            console.log("点击了2!");
        }
    }
}
</script>

阻止事件冒泡 stop

触发子级元素的事件的同时,也触发了父级元素的事件。

冒泡通常出现在嵌套中,比如div有个点击事件,其内有个其他的标签,也有一个点击事件。如下所示。

html 复制代码
<template>
    <h1>阻止事件冒泡</h1>
    <div @click="clickDiv">
        <p @click="clickP">666666</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
           
        }
    },
    methods:{
        clickDiv(e){
            console.log("点击了 div!");
        },
        clickP(){
            console.log("点击了 p!");
        }
    }
}
</script>

当点击对应的p标签的文字后,控制台中将打印如下的信息。

如何想要只触发p标签的点击事件,但不想触发外层的其他点击事件,这种如何实现呢?

在js原生语法中,可以采取e.stopPropagation() 进行事件冒泡的阻止操作。

比如:

html 复制代码
<template>
    <h1>阻止事件冒泡</h1>
    <div @click="clickDiv">
        <p @click="clickP">666666</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
           
        }
    },
    methods:{
        clickDiv(e){
            console.log("点击了 div!");
        },
        clickP(e){
            // js 原生阻止事件 冒泡
            e.stopPropagation();
            console.log("点击了 p!");
        }
    }
}
</script>

在vue中有一个更为简单的方式实现,直接在对应事件后增加.stop标识。

html 复制代码
<template>
    <h1>阻止事件冒泡</h1>
    <div @click="clickDiv">
        <p @click.stop="clickP">666666</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
           
        }
    },
    methods:{
        clickDiv(e){
            console.log("点击了 div!");
        },
        clickP(e){
            // js 原生阻止事件 冒泡
            //e.stopPropagation();
            console.log("点击了 p!");
        }
    }
}
</script>
相关推荐
herogus丶16 分钟前
【Chrome】‘Good助手‘ 扩展程序使用介绍
前端·chrome
独立开阀者_FwtCoder19 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者22 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder22 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder23 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806937 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
rui锐rui1 小时前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥1 小时前
JavaScript之数组方法详解
javascript