Vue——事件修饰符

news/2024/9/23 23:29:52/

文章目录

  • 前言
  • 阻止默认事件 prevent
  • 阻止事件冒泡 stop

前言

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

官方文档 事件修饰符

阻止默认事件 prevent

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

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

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


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

<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>javascript">
export default{data(){return{}},methods:{clickTest1(e){e.preventDefault();console.log("点击了!");},clickTest2(){console.log("点击了2!");}}
}
</script>

在这里插入图片描述

阻止事件冒泡 stop

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

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

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

当点击对应的p标签的文字后,控制台中将打印如下的信息。
在这里插入图片描述
如何想要只触发p标签的点击事件,但不想触发外层的其他点击事件,这种如何实现呢?

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

比如:

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

在这里插入图片描述
在vue中有一个更为简单的方式实现,直接在对应事件后增加.stop标识。

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

http://www.ppmy.cn/news/1464556.html

相关文章

【MATLAB源码-第217期】基于matlab的16QAM系统相位偏移估计HOS算法仿真,对比补偿前后的星座图误码率。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 高阶统计量&#xff08;HOS&#xff09;频偏估计算法 高阶统计量&#xff08;Higher Order Statistics, HOS&#xff09;频偏估计算法是一种先进的信号处理技术&#xff0c;广泛应用于现代数字通信系统中&#xff0c;以应对…

Microsoft VBA Excel 去重小工具

问题简述 在本工作表中&#xff0c;A1:B3单元格样式如下&#xff0c;通过名称管理器B列的单元格被命名为"LinkFile"、“SheetName”、“InputArea”&#xff0c;请实现以下功能&#xff1a;读取Excel文件中的数据&#xff0c;去除重复的数据&#xff0c;并记录每个数…

ffpmeg windows WSl 编译so

1.NDK 环境变量配置 2.git clone ffpmeg 3.创建脚本&#xff08;需先下载gcc编译器&#xff09; 64位脚本如下 #!/bin/bashexport NDK/home/test/ndk20 #这里配置先你的 NDK 路径 TOOLCHAIN$NDK/toolchains/llvm/prebuilt/linux-x86_64function build_android {./configure \ …

内存函数<C语言>

前言 前面两篇文章介绍了字符串函数&#xff0c;不过它们都只能用来处理字符串&#xff0c;C语言中也内置了一些内存函数来对不同类型的数据进行处理&#xff0c;本文将介绍&#xff1a;memcpy()使用以及模拟实现&#xff0c;memmove()使用以及模拟实现&#xff0c;memset()使用…

解决文件传输难题:如何绕过Gitee的100MB上传限制

引言 在版本控制和代码托管领域&#xff0c;Gitee作为一个流行的平台&#xff0c;为用户提供了便捷的服务。然而&#xff0c;其对单个文件大小设定的100MB限制有时会造成一些不便。 使用云存储服务 推荐理由&#xff1a; 便捷性&#xff1a;多数云存储服务如&#xff1a; Dro…

0.1 视频简介

0.1 视频简介 视频泛指将动态影像以电信号方式加以捕捉、纪录、处理、存储、发送与重现的各种技术。视频系统在显示分辨率、宽高比、刷新率、色彩功能和其他质量方面各不相同。存在模拟和数字变体&#xff0c;并且可以在多种媒体上承载&#xff0c;包括无线电广播、磁带、光盘…

高并发处理

高并发处理是对系统在同时处理大量请求能力的一种考验。在设计高并发系统时&#xff0c;通常会涉及到多个层面的优化&#xff0c;包括应用程序、数据库、服务器和网络架构等方面的优化。以下是一些建议如何设计和优化高并发系统&#xff1a; 应用程序层面 &#xff1a; 异步处…

数据库基础+增删查改初阶

数据库基础增删查改初阶 一。数据库操作 1.概念&#xff1a; 一个mysql服务器上有很多的表&#xff0c;把有关系的表放在一起就构成了一个数据集合&#xff0c;此时称为“数据库”&#xff0c;一个mysql1服务器上可以有多个这样的数据库 2.创建数据库&#xff1a; create …